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 实例并调用实例方法，不知道的话可以自己先打印出来看看，

虽然简单，但是也是第一次遇到，记录一下下，以免忘记（我的记忆只有七秒，忘得快）

下面是效果图，有点丑，勿喷

总结