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;
        }
    }
}
目录
相关文章
|
11月前
element-plus:el-table自定义展开图标处于列的位置
element-plus:el-table自定义展开图标处于列的位置
380 0
|
前端开发
element ui el-table 多选 表头全选框替换文字
element ui el-table 多选 表头全选框替换文字
1522 0
|
1天前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
12 3
|
2天前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
11 1
|
2月前
el-select如何自定义下拉选项框的宽度
el-select如何自定义下拉选项框的宽度
314 0
|
2月前
el-cascader组件实现点击、递归勾选联动子集children所有选项被选中。
el-cascader组件实现点击、递归勾选联动子集children所有选项被选中。
element中el-radio无法切换点击和input框无法输入的问题(整理)
element中el-radio无法切换点击和input框无法输入的问题(整理)
|
10月前
|
JavaScript
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
|
11月前
element-plus:el-table展开图标替换
element-plus:el-table展开图标替换
390 0
|
12月前
解决el-image中预览图片功能顺序问题
解决el-image中预览图片功能顺序问题
224 0

热门文章

最新文章

相关实验场景

更多