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自定义展开图标处于列的位置
659 0
|
23天前
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
208 1
|
4月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
646 3
|
4月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
727 1
|
4月前
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
231 0
|
6月前
uniapp uni-combox 下拉提示无匹配项(完美解决--附加源码解决方案及思路)
uniapp uni-combox 下拉提示无匹配项(完美解决--附加源码解决方案及思路)
360 0
|
6月前
el-select如何自定义下拉选项框的宽度
el-select如何自定义下拉选项框的宽度
906 0
layui表单select框同时支持下拉和输入的解决方案
layui表单select框同时支持下拉和输入的解决方案
354 0
element中el-radio无法切换点击和input框无法输入的问题(整理)
element中el-radio无法切换点击和input框无法输入的问题(整理)
|
JavaScript
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)