vue中van-picker的选项插槽的使用

目录 van-picker的内部选项怎么来自定义 Vant选择器使用插槽 总结

van-picker的内部选项怎么来自定义

首先要确保 Vant UI 的版本在2.10.0以上

然后 利用 插槽 slot来实现，在Vant 里插槽有一个 进阶 用法 #

<van-picker
  :show -t oolbar="false"
  :default -i ndex="2" // 默认选中第三行，选中第一行的话，上面会有一段空白，不好看
  :loading="loading"
  :columns="columns" // 一定要绑定数据 源 
>
  <template #option=" IT em"> // 这里的item就是每一个选项，可以是一个对象也可以是一个字符串
  // 我这里实现的是每一行的选项由id和n am e组成
  // 切记不要用v-for，会导致数据重复出现在一个选项里
    <van-row>
      <van-col :span="12" class="van-h ai rline--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="{ h ei ght: '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="s ub mit">保存</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 实例并调用实例方法，不 知道 的话可以自己先打印出来看看，

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

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

总结

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

您可能感兴趣的 文章 : vue vant中picker组件的使用 使用van-picker 动态设置当前选中项 Vue具名插槽+作用域插槽的混合使用方法

总结

以上是 为你收集整理的 vue中van-picker的选项插槽的使用 全部内容，希望文章能够帮你解决 vue中van-picker的选项插槽的使用 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue中van-picker的选项插槽的使用的详细内容...