van-picker组件default-index属性设置不生效踩坑及解决

 更新时间:2023年01月17日 16:44:00   作者:weixin_45121510  
这篇文章主要介绍了van-picker组件default-index属性设置不生效踩坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

van-picker组件default-index属性设置不生效

官方文档:default-index 单列选择时,默认选中项的索引 number | string 0

defaultIndex 这个属性只是一个初始值,

如果需要动态改变 index索引:

建议使用 picker 实例的 setIndexes 方法

通过 ref 可以获取到 Picker 实例并调用实例方法,

setIndexes 设置所有列选中值对应的索引 indexes -

// 1.给van-picker设置ref,如ref="van_picker"

	<van-popup v-model="showPicker" position="bottom">
		<van-picker
			show-toolbar  value-key="label"  ref="van_picker"
			:columns="columns"  :default-index="defaultBuIndex"
			@confirm="onConfirm" @cancel="showPicker = false"
		/>
	</van-popup>
	
// 2. 在需要的方法中调用:  

	 this.$nextTick(() =>{
		this.$refs.van_picker.setIndexes([0])    // 注意这里是数组[索引值]
	})

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

<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(); //执行一下
 }

目前想到的解决办法只有这三种!

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Spring boot 和Vue开发中CORS跨域问题解决

    Spring boot 和Vue开发中CORS跨域问题解决

    这篇文章主要介绍了Spring boot 和Vue开发中CORS跨域问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 从vue源码看props的用法

    从vue源码看props的用法

    平时写vue的时候知道 props 有很多种用法,今天我们来看看vue内部是怎么处理 props 中那么多的用法的。非常具有实用价值,需要的朋友可以参考下
    2019-01-01
  • vue中的keep-alive用法指南

    vue中的keep-alive用法指南

    keep-alive是Vue中的一个内置组件,用于缓存非活动组件实例,避免重复渲染,优化性能,本文给大家介绍vue中的keep-alive用法指南,感兴趣的朋友一起看看吧
    2024-10-10
  • vue脚手架搭建项目的兼容性配置详解

    vue脚手架搭建项目的兼容性配置详解

    这篇文章主要介绍了vue脚手架搭建项目的兼容性配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue限制实现不登录无法进入其他页面

    vue限制实现不登录无法进入其他页面

    本文主要介绍了vue限制实现不登录无法进入其他页面,vue限制不登录,通过url进入其他页面强制回到登录页面;已经登录的情况下,不可以再进入登录界面,感兴趣的可以了解一下
    2024-01-01
  • 详解webpack+vue-cli项目打包技巧

    详解webpack+vue-cli项目打包技巧

    本篇文章主要介绍了详解webpack+vue-cli项目打包技巧 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 如何利用 vue实现鼠标悬停时显示元素或文本

    如何利用 vue实现鼠标悬停时显示元素或文本

    Vue.js 是一种流行的 JavaScript 框架,可以使 Web 应用程序的开发变得更加轻松和高效,这篇文章主要介绍了在 vue 中鼠标悬停时显示元素或文本,需要的朋友可以参考下
    2023-05-05
  • Vue vant-ui使用van-uploader实现头像上传功能

    Vue vant-ui使用van-uploader实现头像上传功能

    这篇文章主要介绍了Vue vant-ui使用van-uploader实现头像图片上传,项目中是使用有赞vant-ui框架实现的头像上传替换功能,用到了封装的图片压缩封装之后再去上传图片this.$imgUpload.imgZip(),本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2022-05-05
  • 解决vue中this.$set()不更新问题

    解决vue中this.$set()不更新问题

    我在做一个附件删除功能的时候发现,明明打印出来附件已经没有数据了但是页面就是不刷新, this.$set()不生效,所以本文小编给大家介绍了vue中this.$set()不更新的解决方法,需要的朋友可以参考下
    2023-11-11
  • 如何使用yarn创建vite+vue3&&electron多端运行

    如何使用yarn创建vite+vue3&&electron多端运行

    这篇文章主要介绍了如何使用yarn创建vite+vue3&&electron多端运行,本文分步骤给大家介绍的非常详细,包括使用yarn创建vite+vue3项目会遇到哪些问题,感兴趣的朋友跟随小编一起看看吧
    2024-03-03

最新评论