一文读懂Vue中的el-dialog（附Demo）

el-dialog 是 Element UI 库中的一个组件，用于创建对话框。在 Vue 中，你可以使用 el-dialog 来显示包含标题、内容和按钮的模态对话框。

下面是一个简单的 el-dialog 使用示例：

首先，确保你已经在项目中安装并引入了 Element UI。

npm install element-ui --save

然后在 Vue 组件中使用 el-dialog：

<template>
  <div>
    <el-button @click="dialogVisible = true">打开对话框</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

在这个例子中，我们定义了一个名为 dialogVisible 的数据属性，用于控制对话框的显示与隐藏。点击按钮会将 dialogVisible 设置为 true，从而打开对话框。在对话框中，我们使用 slot 插槽来添加自定义按钮。before-close 属性用于定义关闭对话框前的行为，这里我们添加了一个确认提示框。