Vant 选择器使用插槽方法

约定不等于承诺〃 2023-01-15 12:23 326阅读 0赞

## Vant 选择器 使用插槽方法 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTk1ODMx_size_16_color_FFFFFF_t_70]  
官方提供样式满足不了自己需要的样式时可以使用插槽可以自定义布局样式：  
我这里配合了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="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 实例并调用实例方法，不知道的话可以自己先打印出来看看，  
虽然简单，但是也是第一次遇到，记录一下下，以免忘记（我的记忆只有七秒，忘得快）

下面是效果图，有点丑，勿喷  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTk1ODMx_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTk1ODMx_size_16_color_FFFFFF_t_70]: /images/20221022/1f86fe05951f438882f0f8728be30f72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTk1ODMx_size_16_color_FFFFFF_t_70 1]: /images/20221022/f93b2c6773fd4948a8185753d1ecaf3f.png