解决使用element-plus时使用el-select-v2组件时,选中后无法移除focus的状态的方法。

我们可以使用element-ui-plus的el-select-v2的组件,实现复合搜索和下拉框的功能。
使用如下模块:

        <template>
            <el-select-v2 v-model="value" filterable :options="options" placeholder="Please select"
                @visibleChange="removeSelectFocus" style="width: 240px" :disabled="state.selectStatus ? false : true">
                <!-- 
                    filterable  是否可筛选	
                    options  要渲染的数据内容。
                    @visibleChange  下拉框出现/隐藏时触发  val 出现则为 true,隐藏则为 false
                 -->
                <template #default="{ item }">
                    <span>{
   
   { item.label }}</span>
                    <span>
                        {
   
   { item.value }}
                    </span>
                </template>
            </el-select-v2>
        </template>

问题:

在使用element-ui-plus的el-select-v2时候,我们发现选中完成之后,该select还处于
foucs的状态。无法通过api直接移除focus的状态。
在这里插入图片描述
如图所示,一直为focus状态。

解决方法

通过研究调查发现,我们可以设置select的disabled属性来解决该问题。当我们选中后,监听visibleChange事件,先把下拉框
的状态改为disabled状态,再设置延迟把disabled状态取消掉,即可。
出现的样式问题,我们可以把disabled的禁用状态进行改变。
具体解决方法如下所示:
jsFunction:

<script>
    let state = {
      
      
        selectStatus: true
    }

    const removeSelectFocus = (val) => {
      
      
        if (!val) {
      
      
            state.selectStatus = false;  //先设置为禁用状态
            setTimeout(() => {
      
      
                state.selectStatus = true;  //解决禁用状态
            }, 50);
            getUniversityRequest();
        }
    }
</script>
<style lang='less'>
    /deep/ .el-select-v2__wrapper.is-disabled {
      
      
        background: none;
        cursor: pointer;
    }
</style>

通过以上方法就可以解决focus状态的问题了。

猜你喜欢

转载自blog.csdn.net/m54584mnkj/article/details/128661900