优化实现el-input后缀图标和clearable的兼容
Sonder
2024-12-05
1006字
3分钟
浏览 (156)
经常能遇到一个需求，需要做成如下的样子
但是众所周知，element的clearable和后缀图标时位置是冲突的， 他会这样:
造成这样的原因是因为：
所以我们只要把他们的父级内容改为反序的不就行了，所以
:deep(.el-input__suffix) {
height: auto;
.el-input__suffix-inner {
display: flex;
flex-direction: row-reverse;
}
}解决问题之后的实现效果如下:
完整代码：
<div class="search-input">
<el-input
ref="inputRef"
v-model="search"
clearable
placeholder="请输入商品编号enter搜索"
@keydown.enter="onKeyDown"
>
<template #suffix>
<span class="text" @click="onKeyDown">搜索</span>
</template>
</el-input>
</div>.search-input {
padding: 0 15px;
:deep(.el-input__suffix) {
height: auto;
.el-input__suffix-inner {
display: flex;
flex-direction: row-reverse;
}
}
.text {
color: var(--el-color-primary);
cursor: pointer;
user-select: none;
}
}本文参考了 https://blog.csdn.net/AzeShinja/article/details/122310015，如有侵权，请联系删除。