vant Picker组件踩坑

vant Picker组件,不显示顶部栏,change事件拿到的值有1-2s延迟问题
ui设计如图
在这里插入图片描述

因需求要求,picker去掉顶部栏,点击下方确认按钮的时候获取选中的值
方法一:绑定change事件,选项改变时触发(但是有1s的延迟,操作太快了会取不到值,不可取)

<van-picker
    :show-toolbar="true"
    :columns="reason"
    ref="picker"
    @change="change"
  />
    <div class="btn" @click="handlePopSubmit('reason')">确认</div>


change(value){
//单列:Picker 实例,选中值,选中值对应的索引
//多列:Picker 实例,所有列选中值,当前列对应的索引
}

方法二:通过使用ref,调用ref的confirm方法(和方法一是一样的,有1s的延迟

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vant Picker是一个可以滚动选择的下拉列表组件,类似于Select下拉列表。在Vant文档中,虽然没有提供直接的API来实现搜索功能,但可以通过手动实现来实现搜索功能。一个思路是添加一个搜索框,并对搜索框的数据进行双向绑定。然后使用Vue的watch来监听数据的变化,每次数据更新后,可以使用匹配规则对请求接口返回的数据列表进行筛选,并将筛选后的数据列表绑定给Picker组件,从而实现搜索功能。这个功能不需要请求后端接口,可以直接在前端进行处理。 官方文档中可能并未提供详细的实现方法,但通过仔细阅读文档、方法和类型的说明,可以找到相关内容。此外,度娘也可能无法直接提供相关信息,因此可能需要花费一些时间进行试错和解决问题。你可以参考官方文档和尝试不同的方法和参数来实现vant picker的搜索功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [【每天学一点-05】在Vue中使用Vant组件-picker选择器,并给选择器添加搜索功能](https://blog.csdn.net/weixin_43906233/article/details/125943267)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Vant picker 多级联动操作](https://download.csdn.net/download/weixin_38731979/14693049)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值