element-ui 下拉框change事件中添加弹窗 ,关闭弹窗select再次获取焦点

业务需求是切换下拉选项是弹出提示修改其他数据,点击确定修改,点击取消下拉框值不改变。

这样就需要一个中间值作为转换用,使用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的值和切换的值相同造成弹窗的取消操作失去作用

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容