vant Picker组件踩坑

  • Post author:
  • Post category:其他


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的延迟,操作太快了会取不到值)

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

handlePopSubmit(){
	console.log('选中的值',this.$refs.picker.getValues)
}



方法三:(有点笨拙,但是不会出问题)

  1. vant-picker的show-toolbar设置为true,但是在页面上对顶部的导航栏样式隐藏(例如:display:none)
<van-picker
    :show-toolbar="true"
    :columns="reason"
    ref="picker"
    @confirm="handleReasonChange"
  />
  <div class="btn" @click="handlePopSubmit('reason')">确认</div>


handleReasonChange(value, index) {
//value :选中的值 取值即可
//index: 下标   
  }

handlePopSubmit(){
	 let pickReason = (this.$refs.picker as any).$el.children[0].children[1]; //拿到顶部栏的确认元素
      pickReason.click(); //执行一下
 }


目前想到的解决办法只有这三种,有更好的办法可以联系我,我在更新到文档上!



版权声明:本文为lxw199711原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。