vue中van-picker的选项插槽的使用
作者：超级大帅比
这篇文章主要介绍了vue中van-picker的选项插槽的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
van-picker的内部选项怎么来自定义
首先要确保 Vant UI 的版本在2.10.0以上
然后利用插槽slot来实现，在Vant 里插槽有一个进阶用法 #
<van-picker
:show-toolbar="false"
:default-index="2" // 默认选中第三行，选中第一行的话，上面会有一段空白，不好看
:loading="loading"
:columns="columns" // 一定要绑定数据源
>
<template #option="item"> // 这里的item就是每一个选项，可以是一个对象也可以是一个字符串
// 我这里实现的是每一行的选项由id和name组成
// 切记不要用v-for，会导致数据重复出现在一个选项里
<van-row>
<van-col :span="12" class="van-hairline--right">
<p style="text-align: center">
{{ item.id }}
</p>
</van-col>
<van-col :span="12" class="van-hairline--left">
<p style="text-align: center">
{{ item.name }}
</p>
</van-col>
</van-row>
</template>
</van-picker>附上Vant的官方地址：https://vant-contrib.gitee.io/vant/#/zh-CN/home
Vant选择器使用插槽
官方提供样式满足不了自己需要的样式时可以使用插槽可以自定义布局样式：
我这里配合了popup弹窗层使用，具体看自己的需求
<van-popup v-model="sexShow" position="bottom" :style="{ height: '50%' }">
<van-picker :show-toolbar="true" :columns="columns" ref="getValues" @confirm="onConfirm">
<template #cancel="item">
<p>
性别
</p>
</template>
<template #confirm="item">
<div class="sexContent">
<!-- <van-button class="submit">保存</van-button> -->
<van-button class="submited">保存</van-button>
</div>
</template>
<template #option="item">
<p style="text-align: center">
{{item.text}}
</p>
</template>
</van-picker>
</van-popup>
columns: [{
text: '男',
value: 1
},
{
text: '女',
value: 2
}],
方法：
onConfirm(value) {
console.log(value) //打印的是自己定义的数组对象，然后就可以进行自己的相关操作了
},
另外：
this.$refs.getValues.getValues()
是通过 ref 可以获取到 Picker 实例并调用实例方法，不知道的话可以自己先打印出来看看，
虽然简单，但是也是第一次遇到，记录一下下，以免忘记（我的记忆只有七秒，忘得快）
下面是效果图，有点丑，勿喷
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。