element Vue 不同按钮控制同一个 el-dialog 弹窗的 title 动态显示内容

1. 定义一个变量 dailogTitleType

<el-dialog :title="dailogTitleType+'图片'" :visible.sync="dialogVisible" width="600px" ></el-dialog>

2. 返回一个空的变量

export default {
  data() {
    return {
      dialogTitleType:''
    }
  }
}

3. 在对应按钮的onclik方法里加入dialogTitleType变量的默认值

<el-button type="primary" size="mini" @click="handleAdd">添加图片</el-button>

<el-button type="primary" size="mini" @click="handleEdit">编辑</el-button>

 //点击新增按钮触发函数
 handleAdd: function(index, row) {
   this.dailogTitleType ="添加";
   this.addPictureDialogVisible = true;
   this.form = Object.assign({}, row);
 },
 //点击编辑按钮触发函数
 handleEdit: function(index, row) {
   this.dailogTitleType ="编辑";
   this.addPictureDialogVisible = true;
   this.form = Object.assign({}, row);  
 },

 

 

Element UI 的 Dialog 组件默认提供了一个关闭按钮,如果想要自定义这个按钮的行为或外观,可以利用其可配置选项。以下是一些可能的做法: 1. **替换默认按钮**[^2]: 你可以通过覆盖`before-close`属性来实现自定义行为。这是一个示例,展示如何在点击关闭按钮时触发一个特定的回调函数: ```html <el-dialog :visible.sync="dialogVisible" title="标题" :before-close="customClose" ></el-dialog> ``` 然后在你的 Vue 实例中定义这个方法: ```javascript methods: { customClose() { // 自定义逻辑,如保存更改或清理数据 console.log('Custom close action'); } } ``` 2. **添加自定义按钮**[^1]: 如果你想完全替换关闭按钮,可以在 Dialog 内部添加一个自定义元素。例如,你可以添加一个外部链接或者使用 Vue 的 v-if 来显示自定义按钮: ```html <template> <el-dialog :visible.sync="dialogVisible"> ... <div slot="footer"> <!-- 使用v-if动态插入关闭按钮 --> <button v-if="customCloseButton" @click="closeDialog">我的关闭按钮</button> <el-button type="primary" native-type="button" @click="$emit('update:visible', false)">原生关闭</el-button> </div> </template> <script> export default { data() { return { dialogVisible: true, customCloseButton: true }; }, methods: { closeDialog() { // 自定义关闭逻辑 } } } </script> ``` 请注意,确保你在适当的地方管理对话框的可见性,如上面的 `:visible.sync` 属性。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值