解决ie浏览器el-select选择后出现光标的问题

最新推荐文章于 2024-07-12 12:07:48 发布

芒果终结者

最新推荐文章于 2024-07-12 12:07:48 发布

阅读量2.4k

点赞数 2

分类专栏：前端文章标签： el-select ie兼容

本文链接：https://blog.csdn.net/cs23405/article/details/117079020

版权

前端专栏收录该内容

45 篇文章 1 订阅

订阅专栏

使用element-ui中的el-select, 作为切换当前用户的状态（在线，忙碌，离开），在chrome浏览器下显示是正常的，但在ie（11）浏览器下，切换用户状态后，会出现光标闪烁的问题，如下图，‘忙碌’后面是闪烁的光标

解决方案：

因为是input引起的，我们只需要给input加上UNSELECTABLE属性，让UNSELECTABLE=“on”即可，这里我们不用ref获取dom，使用id，可以直接定位到input, 直接给input添加属性。代码如下：

<el-select
     id="wbNavUsSelect"
     v-model="userState"
     size="mini"
     :clearable="false"
     @change="stateChange"
 >
     <el-option
             v-for="(state, i) in stateList"
                   :key="i"
                   :label="state.label"
                   :value="state.value"
        >
            <svg-icon :icon-class="state.icon" />
        <span>{{ state.label }}</span>
    </el-option>
</el-select>

//js
stateList: [
        // 为简化逻辑，请保持icon和value名一致
        { label: '在线', icon: 'state_online', value: 'state_online' },
        { label: '忙碌', icon: 'state_busy', value: 'state_busy' },
        { label: '离开', icon: 'state_leave', value: 'state_leave' }
 ]

stateChange(val) {
     this.userState = val
     
     // 处理在ie浏览器出现光标的问题
     const elem = document.getElementById('wbNavUsSelect')
     if (elem.hasAttribute('UNSELECTABLE') === false) {
          elem.setAttribute('UNSELECTABLE', 'on')
     }
},