问题

看代码

1
2
3
4
5
<el-input placeholder="点击选择..." clearable>
</el-input>

<el-input placeholder="点击选择..." readonly>
</el-input>

以上代码只能二选一，如何突破限制我都想要呢？

解决方案

1
2
<el-input @hook:mounted="updateClearable" ref="showClearable" placeholder="点击选择图标" clearable>
</el-input>
1
2
3
4
5
methods: {
    updateClearable(){
        this.$refs.showClearable.$refs.input.readOnly = true;
    }
}

原理

具体可分析一下源码:

1
2
3
4
5
6
7
8
9
computed: {
    showClear() {
        return this.clearable &&
            !this.inputDisabled &&
            !this.readonly &&
            this.nativeInputValue &&
            (this.focused || this.hovering);
    }
}

说明clear和readonly不能并存，无法从配置下手
那就等组件挂载上去之后，直接改原生的input:
input.readOnly = true
即可

组件生命周期： 组件生命周期