elementui2.15.14版本的弹框this.$confirm要额外添加一个自定义按钮
时间: 2024-12-13 22:27:55 浏览: 9
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Element UI 的 `v2.15.14` 版本中,如果你想在 `$confirm` 弹框中添加一个自定义按钮,可以按照以下步骤操作:
首先,在组件的模板部分,使用 Element 的确认提示,并为其 `on-ok` 或者 `on-cancel` 事件添加回调函数,这是默认的行为按钮。然后,你可以创建一个新的 slot (插槽) 对于自定义按钮:
```html
<template>
<el-dialog
:visible.sync="dialogVisible"
title="自定义确认对话框"
>
<div slot="footer">
<!-- 默认按钮 -->
<el-button type="primary" @click="handleOk">确定</el-button>
<el-button @click="handleCancel">取消</el-button>
<!-- 自定义按钮 -->
<el-button v-if="customButtonShow" slot="append" @click="handleCustomAction">自定义按钮</el-button>
</div>
</el-dialog>
</template>
```
接下来,在对应的 Vue 实例中,你需要设置 `dialogVisible` 属性来控制弹窗是否显示,以及 `customButtonShow` 来控制自定义按钮是否显示:
```javascript
export default {
data() {
return {
dialogVisible: false,
customButtonShow: false, // 当需要显示自定义按钮时设为 true
};
},
methods: {
handleOk() {
this.dialogVisible = false; // 确定后关闭对话框
// 可能的操作...
},
handleCancel() {
this.dialogVisible = false; // 取消后关闭对话框
},
handleCustomAction() {
// 自定义按钮的处理逻辑
console.log('自定义动作执行');
}
},
};
```
当 `customButtonShow` 为 `true` 时,自定义按钮将会出现在弹框的底部。你可以根据需要调整这个逻辑和按钮内容。
阅读全文