业务需求是切换下拉选项是弹出提示修改其他数据,点击确定修改,点击取消下拉框值不改变。
这样就需要一个中间值作为转换用,使用visible-change时间获取切换下拉之前的值beforeStorageValue,
storeLocation: '',//v-model值
beforeStorageValue: '',//select切换之前的值
代码如下:
visibleChange(e,v){
if(e){
this.beforeStorageValue = v
}
},
之后再change事件中添加弹窗this.$msgbox,代码如下:
change(val){
if (this.beforeStorageValue) {
if (val !== this.beforeStorageValue) {
this.selectDisabled = true //用来取消select下拉框隐藏后再次获取焦点从而使beforeStorageValue的值修改失败
const h = this.$createElement
this.$msgbox({
title: '消息',
message: h('p', null, [
h('span', null, '更换后,值将改变!')
]),
showCancelButton: true,
confirmButtonText: '更换',
cancelButtonText: '暂不更换',
center: true,
distinguishCancelAndClose: true,
closeOnClickModal: false
})
.then(() => {
// 更换后的操作
this.selectDisabled = false //用来取消select下拉框隐藏后再次获取焦点从而使beforeStorageValue的值修改失败
this.beforeStorageValue = this.storeLocation
})
.catch(action => {
//暂不更换后的操作
this.selectDisabled = false //用来取消select下拉框隐藏后再次获取焦点从而使beforeStorageValue的值修改失败
this.storeLocation = this.beforeStorageValue
})
}
}
},
element-ui 下拉框change事件中添加弹窗 ,关闭弹窗select再次获取焦点致使beforeStorageValue的值修改不正确的问题,
在select添加disabled属性,通过disabled阻止select切换选项后再次获取焦点使获取的beforeStorageValue的值和切换的值相同造成弹窗的取消操作失去作用