el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题

简介: el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题

背景:常见的输入框存在两个图标的展示效果都是清空在前搜索或其他图标在后

常见以及最终实现效果(清空图标在前,搜索图标在后)

BUG以及el-input默认效果

问题排查

通过控制台审查元素能够发现,默认的效果是自定义图标在前,清空图标在后

解决方案

el-input代码不用动

<el-input @input="get_message_list"  suffix-icon="el-icon-search" clearable v-model="name" placeholder="搜索模型">
</el-input>

重点代码

给.el-input__suffix-inner做一个反序就实现了

::v-deep {
    .el-input__suffix {
        &-inner {
            flex-direction: row-reverse;
            -webkit-flex-direction: row-reverse;
            display: flex;
        }
    }
}
目录
相关文章
element-plus:el-table自定义展开图标处于列的位置
element-plus:el-table自定义展开图标处于列的位置
550 0
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
|
前端开发
element ui el-table 多选 表头全选框替换文字
element ui el-table 多选 表头全选框替换文字
1607 0
|
20天前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
3月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
351 3
|
3月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
429 1
|
4月前
|
前端开发 iOS开发
input框设置placeholder属性在iOS中显示不完整
input框设置placeholder属性在iOS中显示不完整
44 1
|
5月前
el-select如何自定义下拉选项框的宽度
el-select如何自定义下拉选项框的宽度
684 0
element中el-radio无法切换点击和input框无法输入的问题(整理)
element中el-radio无法切换点击和input框无法输入的问题(整理)
|
JavaScript
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)