element-ui 下拉框change事件中添加弹窗 ，关闭弹

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

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