Vue3使用vant检索组件van-search遇到的问题小结
作者：杀猪刀-墨林
当清空按钮与检索按钮同时居右时,点击clear清空按钮事件时会同时触发click-right-icon事件,这个时候容易触发一系列问题,小编小编给大家分享Vue3使用vant检索组件van-search遇到的问题小结,感兴趣的朋友一起看看吧
当清空按钮与检索按钮同时居右时，点击clear清空按钮事件时会同时触发click-right-icon事件,如下配置：
<van-search
v-model="form.search"
show-action
shape="round"
left-icon=""
right-icon="search"
placeholder="请输入站点名称"
@search="onClickSearch()"
@clear="() => onClickSearch(true)"
@click-right-icon="onClickSearch()"
>
</van-search>建议检索按钮放到左侧，防止与清空按钮出现同一侧。
且清空按钮点击无效，层叠样式排版有问题，需重新使用样式更改位置偏移
.van-field__body {
.van-field__control[type='search'] {
margin-right: 25px;
}
.van-field__control[type='search'] + .van-field__clear {
position: absolute;
right: 20px;
z-index: 9999;
width: 40px;
flex-shrink: unset !important;
}
}到此这篇关于Vue3使用vant检索组件van-search遇到的问题小结的文章就介绍到这了,更多相关Vue3 van-search内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！