element-ui的el-select选择器的@blur事件失效的坑

最新推荐文章于 2024-03-01 17:45:49 发布

澎湖Java架构师

最新推荐文章于 2024-03-01 17:45:49 发布

阅读量1.4k

点赞数 1

分类专栏：前端 html 面试文章标签： ui 前端 javascript

本文链接：https://blog.csdn.net/m0_54850604/article/details/123158079

版权

在element-UI中，el-select组件的blur事件有时无法触发绑定的函数。解决办法是通过@focus事件结合ref实现。文章还分享了前端开发的学习思路和资源。

摘要由CSDN通过智能技术生成

element-UI文档中本来el-select有个blur事件绑定函数属性。但是使用后发现有时候失焦事件并不能触发生效，也就导致所绑定的函数不能执行。

解决办法：
利用el-select的@focus方法，在select标签内添加 ref 于此便可在focus事件内触发 blur事件。代码如下：

 <el-select
            multiple
            filterable
            allow-create
            default-first-option
            v-model="request_msg"
            placeholder="请选择或自行输入拒绝原因"
            class="config-select"
            @focus="onBlur('request_msg', 'reqMsgRef')"
            ref="reqMsgRef"
          >
            <el-option
              v-for="item in refuseConfig"
              :key="item"
              :value="item"
              :label="item"
            ></el-option>
 </el-select>
onBlur(flag, ref) {
      this.$refs[ref].$refs.input.blur = () => {