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-ui上传多张图片时闪动问题
解决element-ui上传多张图片时闪动问题
928 0
|
JavaScript API
Vue使用vue-3d-model组件预览3D三维文件、立体文件,支持旋转、自动播放
Vue使用vue-3d-model组件预览3D三维文件、立体文件,支持旋转、自动播放
|
JavaScript
VUE中el-input阻止冒泡防止触发父级事件
VUE中el-input阻止冒泡防止触发父级事件
850 130
|
数据可视化 Java 开发工具
在分支回滚后,如何恢复被回滚的代码?
在分支回滚后,如何恢复被回滚的代码?
2285 8
|
安全 网络安全 网络虚拟化
100个网络技术中英文术语,收藏收藏!
【10月更文挑战第22天】
2201 5
100个网络技术中英文术语,收藏收藏!
|
容器
echarts的grid——图表的位置配置
echarts的grid——图表的位置配置
3238 1
|
前端开发 JavaScript
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
1829 0
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
2715 4
|
JavaScript 测试技术
vue配置生产环境.env.production、测试环境.env.development
该文章介绍了如何在Vue项目中配置和使用不同的环境变量文件(.env、.env.production、.env.development)以适应开发、测试和生产环境,并通过修改`package.json`中的scripts来实现不同环境的打包。
4781 0
vue配置生产环境.env.production、测试环境.env.development