Element-ui 对话框el-dialog点击关闭事件处理

要在Vue中使用element-ui的el-dialog对话框，你需要先安装element-ui，可以使用npm或者yarn进行安装。 1. 通过npm安装 ``` npm install element-ui --save ``` 2. 通过yarn安装 ``` yarn add element-ui ``` 安装完成后，在Vue项目中引入element-ui，并注册el-dialog组件。 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 现在你可以在Vue组件中使用el-dialog组件了。下面是一个简单的示例： ```html <template> <div> <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button> <el-dialog title="提示" :visible.sync="dialogVisible"> <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 } } } </script> ``` 在这个示例中，我们使用了el-button组件来触发打开对话框的事件，然后在el-dialog组件中定义了对话框的标题和内容，并使用visible.sync来控制对话框的显示和隐藏。在底部我们使用了el-button组件来定义对话框的按钮区域。 这是一个简单的例子，你可以根据自己的需求来定制对话框的样式和交互。