背景:常见的输入框存在两个图标的展示效果都是清空在前搜索或其他图标在后
常见以及最终实现效果(清空图标在前,搜索图标在后)
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;
}
}
}