我正在参加「掘金·启航计划」
el-input中readonly和clearable同时使用，clearable会不生效，解决readonly和clearable不可同时使用问题
场景使用： 通过按钮选择弹窗对应数据后赋值el-input中，但el-input不可手动输入，只可只读，但可一键清空数据。
suffix：输入框尾部内容，只对type="text"有效append：输入框后置内容，只对type="text"有效fa-times-circle-o：对应的清空图标类名，自定义图标，通过css实现hover显示onSearchClear：清空函数onDialogShow：弹窗选择框调用方法readonly：是否只读
<el-form-item v-for="item in formList" :key="item.key" :label="item.label" :prop="item.key">
<el-input v-model="form[item.key]" :maxlength="0" readonly :disabled="item.disabled" class="my-input">
<template v-if="(!item.disabled && item.clearData) || item.clearable" v-slot:suffix>
<span class="fa fa-times-circle-o" v-if="form[item.key]" @click="onSearchClear(item.clearData, item.key, item.callback)"></span>
</template>
<template v-slot:append>
<el-button icon="search" @click="onDialogShow(item.key)" :disabled="item.disabled"></el-button>
</template>
</el-input>
</el-form-item>
.my-input {
.fa {
display: none;
margin-left: 5px;
cursor: pointer;
color:#ccc;
}
}
.my-input:hover {
.fa {
display: inline-block;
}
}
const onSearchClear =(arg: IAnyJsonListItem, key:string, callback: any)=>{
if(arg){
const formData = deepClone(state.form) //深拷贝函数
Object.keys(arg).map((item)=>{
formData[item] = arg[item];
});
formData[key] = null //当前输入框值也需清空
state.form = formData
}
if (callback) {
callback()
}
}
调用组件：
formList: [
{ key: "customerCode", label: "客户", clearData: { customerId: null } },
]
效果如下：
- 不选择任何数据时效果：
- 选中数据后的效果：
- 鼠标hover输入框后效果：
- 清空input输入框数据后效果：
