el-dialog详解

一、eldialog高度

el-dialog是Element UI框架中的一个组件，用于弹出对话框。使用el-dialog时，我们可以通过设置其高度来达到适应不同场景的目的。

在el-dialog中，我们可以通过设置height属性或者max-height属性来控制其高度。默认情况下，el-dialog的高度是自动计算出来的，但如果我们希望el-dialog达到特定的高度，我们可以通过设置height属性或者max-height属性来完成。

height属性可以设置el-dialog的高度，可以接受一个字符串作为参数。例如，设置height为’200px’，则el-dialog的高度为200像素。

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  height="200px"
>
  <p>这是一段消息内容</p>
</el-dialog>

max-height属性可以设置el-dialog的最大高度，同样接受一个字符串作为参数。如果内容的高度超过了max-height的值，则el-dialog会出现滚动条。

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  max-height="400px"
>
  <p>这是一段消息内容</p>
  <p>这是另外一段消息内容</p>
  <p>这是第三段消息内容</p>
  <p>这是第四段消息内容</p>
  <p>这是第五段消息内容</p>
</el-dialog>

二、eldialog关闭事件

在el-dialog中，我们可以通过各种方式关闭对话框。其中一种常见的方式是设置关闭按钮，点击该按钮后可以关闭对话框。我们可以通过监听自定义事件进行一些操作，例如关闭菜单、还原某些状态。

在el-dialog组件中，我们可以通过v-if或者v-model来控制对话框的打开和关闭。当我们想要自动关闭对话框时，可以使用v-if和定时器。

<template>
  <div>
    <el-button type="primary" @click="openDialog">打开对话框</el-button>
    <el-dialog
      title="提示"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="30%"
      @close="handleDialogClose"
    >
      <p>您确定要删除该项吗？</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleDialogClose() {
      this.dialogVisible = false;
      console.log('对话框已关闭');
    },
    handleDialogConfirm() {
      console.log('用户点击了确定按钮');
    },
  },
};
</script>

三、eldialog设置高度

在el-dialog中，我们可以通过设置height属性来控制其高度。默认情况下，el-dialog的高度是自动计算出来的，但如果我们希望el-dialog达到特定的高度，我们可以通过设置height属性来完成。

<template>
  <div>
    <el-button type="primary" @click="openDialog">打开对话框</el-button>
    <el-dialog
      title="提示"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :height="dialogHeight"
      width="30%"
      @close="handleDialogClose"
    >
      <p>这是一段消息内容</p>
      <p>这是另外一段消息内容</p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogHeight: '250px',
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleDialogClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

四、eldialog如何关闭header选取

在el-dialog中，我们可以通过设置header slot来自定义对话框标题区域的内容。例如，我们可以在标题区域右侧添加一个关闭按钮，方便用户关闭对话框。

<template>
  <div>
    <el-button type="primary" @click="openDialog">打开对话框</el-button>
    <el-dialog
      title="自定义标题"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="30%"
      :show-close="false"
    >
      <template #header>
        <div>
          自定义标题内容
          <i class="el-dialog__headerbtn el-dialog__close"></i>
        </div>
      </template>
      <p>这是一段消息内容</p>
      <p>这是另外一段消息内容</p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
  },
};
</script>