VUE宝典之el-dialog使用

在Vue中，el-dialog 是一个常用的组件，用于创建对话框。以下是一个简单的 el-dialog 使用示例：

首先，确保你已经安装并引入了 Element UI，如果没有，你可以通过以下命令安装：

npm install element-ui --save

然后在你的 Vue 组件中引入 Element UI 并全局注册 el-dialog：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(ElementUI)

接下来，你可以在你的组件模板中使用 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>

在这个例子中，我们创建了一个对话框，当点击按钮时会显示。对话框有一个标题，内容区域和一个页脚，其中包含关闭按钮。visible.sync 属性用于创建一个双向绑定，使得我们可以通过修改 dialogVisible 的值来控制对话框的显示与隐藏。handleClose 方法用于在关闭对话框前进行确认。