Vue3使用vant检索组件van-search遇到的问题小结
更新时间：2024年02月27日 10:09:57 作者：杀猪刀-墨林
当清空按钮与检索按钮同时居右时,点击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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Element-ui upload上传文件限制的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
虚拟列表用来解决大数据量数据渲染问题,由于一次性渲染性能低,所以诞生了虚拟列表渲染,下面我们就来学习一下不同场景下Vue中虚拟列表是如何实现的吧2023-10-10
这几天研究项目时,看到了 better-scroll 插件,看着感觉功能挺强,这篇文章主要给大家介绍了关于vue使用better-scroll实现横向滚动的相关资料,需要的朋友可以参考下2021-06-06
解决vue-router进行build无法正常显示路由页面的问题
下面小编就为大家分享一篇解决vue-router进行build无法正常显示路由页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
viewer.js用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,这篇文章主要给大家介绍了关于vue3使用viewer的详细用法,文中通过代码介绍是非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了Vue.use源码，Vue.use方法的引入，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
今天小编就为大家分享一篇vue单页面应用打开新窗口显示跳转页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue引入vuetify框架你需要知道的几点知识，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
这篇文章主要介绍了创建Vue项目以及引入Iview的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
最新评论