el-select 的focus事件和ElMessageBox搭配出现的focus死循环问题的解决方法

2年前 (2022) 程序员胖胖胖虎阿
271 0 0

问题

因为业务需要,所以出现了不停弹出ElMessageBox的这种情况,代码如下:

<template>
  <el-select v-model="form.type"  @focus="onFocus">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>
<script>
import ...
export default defineComponent({
  setup() {
    const form = ref({})
    const options = ref([])
    const onFocus = () => {
      if (!form.value.cate) {
        ElMessageBox.alert('请先选择分类', '提示', {
          confirmButtonText: '好的',
        })
      }
    }
    return {
      form,
      options,
      onFocus,
    }
  }
})
</script>

解决方法:

后来想到应该是ElMessageBox组件让el-select不停地处在focus的状态上,所以才会不停地触发focus事件,陷入对话框死循环。所以我就在触发focus事件的结尾,添加让el-select失去焦点的方法,刚好官方文档里,el-select就有一个blur()方法。
这个时候需要用到ref了,而在vue3setup里调用$refs的方式,我先是用了 getCurrentInstance,但是不知道为何返回的是null,所以最终用下面的方法解决了重复弹出的问题。

<template>
  <el-select v-model="form.type"  @focus="onFocus" ref="selectRef">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>
<script>
import ...
export default defineComponent({
  setup() {
    const form = ref({})
    const options = ref([])
    const selectRef = ref(null)
    const onFocus = () => {
      if (!form.value.cate) {
        ElMessageBox.alert('请先选择分类', '提示', {
          confirmButtonText: '好的',
          callback: action => {
            //主动失去焦点的的方法加在这里是无效的。
          }
        })
        selectRef.value.blur() //就是这一句,
      }
    }
    return {
      form,
      options,
      onFocus,
      selectRef,
    }
  }
})
</script>

相关文章

暂无评论

暂无评论...