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)
}
方法三:(有点笨拙,但是不会出问题)
- 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 版权协议,转载请附上原文出处链接和本声明。