首页vue el-dialog中加按钮

vue el-dialog中加按钮

时间: 2025-01-08 18:04:45 浏览: 46

在Vue.js中，`el-dialog`是Element UI库中的一个弹窗组件，用于展示一些内容并提供用户交互。如果你想在`el-dialog`中添加按钮，通常会在`el-dialog`内部使用`<button>`标签，并配合v-on指令绑定点击事件。下面是一个简单的例子： ```html <template> <el-dialog title="自定义标题" :visible.sync="dialogVisible" width="40%" >  <div slot="footer">  <button @click="handleClose">关闭</button> <button @click="handleAction">操作</button> </div> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, }; }, methods: { handleClose() { this.dialogVisible = false; }, handleAction() { // 这里可以添加具体的业务逻辑 console.log('执行了某个操作'); }, }, }; </script> ``` 在这个例子中，`handleClose`方法会使`dialogVisible`变为`false`，从而关闭弹窗，而`handleAction`则是一个模拟的操作处理函数。

阅读全文