组件根据disabled控制hover属性是否生效

html

 <div class="box" :class="{'disabled':isDisabled }">
        <el-input placeholder="" v-model="value" :clearable="false" :style="{width:inputWidth,padding: '0 2px;'}"
                  @input="textChange" :disabled="isDisabled"></el-input>
        <i class="el-icon-error icon" @click="close"></i>
    </div>

css

<style scoped lang="scss">
.box {
    display: inline-block;
    position: relative;
    /deep/ .el-input__inner {
        text-align: center;
        padding: 0 5px;
        display: inline-block;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        color: #9c27b0;
        border: 1px solid #fff;
        background-color:#f1ddf5ad;
        border-radius: 3px;
        box-sizing: border-box;
        white-space: nowrap;
    }
}

.box:hover {
    /deep/ .el-input__inner {
        //border: 1px solid #9c27b0;
    }
    &.disabled{
        &:hover{
            .icon{
                display:none !important;
            }
        }
    }

    /deep/ .icon {
        z-index: 9999;
        position: absolute;
        right: 0;
        top: -4px;
        color: #9c27b0;
        display: inline-block !important;
        transform: translateX(50%);
    }
}

.icon {
    display: none;
}
</style>