vue中van-picker的选项插槽的使用
短信预约 -IT技能 免费直播动态提醒
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 实例并调用实例方法，不知道的话可以自己先打印出来看看，
虽然简单，但是也是第一次遇到，记录一下下，以免忘记（我的记忆只有七秒，忘得快）
下面是效果图，有点丑，勿喷
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
