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;
        }
    }
}
目录
相关文章
|
JavaScript
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
1223 0
|
JavaScript
报错[Vue warn]: $listeners is readonly. $attrs is readonly.怎么解决?
报错[Vue warn]: $listeners is readonly. $attrs is readonly.怎么解决?
element-ui 里 el-popover 位置发生偏移
element-ui 里 el-popover 位置发生偏移
2202 0
|
12月前
|
JavaScript 前端开发
JS实现一键复制、选中复制、选中多行复制
文章介绍了如何使用JavaScript实现一键复制文本、选中文本复制以及选中多行文本复制的功能。提供了详细的代码示例,包括创建临时textarea元素、选中文本、执行复制命令、用户提示以及清理临时元素的完整流程。同时,还考虑了用户可能选中多行文本进行复制的情况。
552 0
|
编解码 前端开发
Element el-row el-col 布局组件详解
本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对齐方式 5. 响应式布局 6. 小结
6832 0
Element el-row el-col 布局组件详解
|
6月前
|
前端开发 API
el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能,利用@sort-change实现动态数据排序,el-table排序方法,el-table可变数据的动态排序
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
8742 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
程序员 开发者
IDEA插件-Grep Console彩色控制台
IDEA插件-Grep Console是一款用于增强IDEA开发环境的工具,它可以帮助开发者更好地搜索和过滤控制台输出。
1347 0
IDEA插件-Grep Console彩色控制台
|
消息中间件 Java API
解密微服务架构:如何在Java中实现高效的服务通信
微服务架构作为一种现代软件开发模式,通过将应用拆分成多个独立的服务,提升了系统的灵活性和扩展性。然而,实现微服务之间的高效通信仍然是许多开发者面临的挑战。本文将探讨在Java环境中实现微服务架构时,如何使用不同的通信机制来优化服务之间的交互,包括同步和异步通信的方法,以及相关的最佳实践。
Vue3项目引入 vue-quill 编辑器组件并封装使用
本文介绍了如何在Vue3项目中引入并封装使用`vue-quill`富文本编辑器组件,包括安装配置、父页面实现、子组件设计以及使用方法和效果展示。
2645 0
Vue3项目引入 vue-quill 编辑器组件并封装使用