vue中van-picker的選項(xiàng)插槽的使用
van-picker的內(nèi)部選項(xiàng)怎么來(lái)自定義
首先要確保 Vant UI 的版本在2.10.0以上
然后利用插槽slot來(lái)實(shí)現(xiàn),在Vant 里插槽有一個(gè)進(jìn)階用法 #
<van-picker
? :show-toolbar="false"
? :default-index="2" // 默認(rèn)選中第三行,選中第一行的話(huà),上面會(huì)有一段空白,不好看
? :loading="loading"
? :columns="columns" // 一定要綁定數(shù)據(jù)源
>
? <template #option="item"> // 這里的item就是每一個(gè)選項(xiàng),可以是一個(gè)對(duì)象也可以是一個(gè)字符串
? // 我這里實(shí)現(xiàn)的是每一行的選項(xiàng)由id和name組成
? // 切記不要用v-for,會(huì)導(dǎo)致數(shù)據(jù)重復(fù)出現(xiàn)在一個(gè)選項(xiàng)里
? ? <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選擇器使用插槽

官方提供樣式滿(mǎn)足不了自己需要的樣式時(shí)可以使用插槽可以自定義布局樣式:
我這里配合了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) //打印的是自己定義的數(shù)組對(duì)象,然后就可以進(jìn)行自己的相關(guān)操作了
},
另外:
this.$refs.getValues.getValues()
是通過(guò) ref 可以獲取到 Picker 實(shí)例并調(diào)用實(shí)例方法,不知道的話(huà)可以自己先打印出來(lái)看看,
雖然簡(jiǎn)單,但是也是第一次遇到,記錄一下下,以免忘記(我的記憶只有七秒,忘得快)
下面是效果圖,有點(diǎn)丑,勿噴

總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
修改vue源碼實(shí)現(xiàn)動(dòng)態(tài)路由緩存的方法
這篇文章主要介紹了修改vue源碼實(shí)現(xiàn)動(dòng)態(tài)路由緩存的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
通過(guò)npm或yarn自動(dòng)生成vue組件的方法示例
這篇文章主要介紹了通過(guò)npm或yarn自動(dòng)生成vue組件的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
分享一個(gè)精簡(jiǎn)的vue.js 圖片lazyload插件實(shí)例
本篇文章主要介紹了分享一個(gè)精簡(jiǎn)的vue.js 圖片lazyload插件實(shí)例。非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-03-03
ElementPlus表單rules校驗(yàn)的方法步驟
相信大家經(jīng)常都會(huì)遇到要處理表單驗(yàn)證的環(huán)節(jié),而我在最近的項(xiàng)目中也遇到需要做表單驗(yàn)證的業(yè)務(wù),下面這篇文章主要給大家介紹了關(guān)于ElementPlus表單rules校驗(yàn)的方法步驟,需要的朋友可以參考下2023-04-04
vue中動(dòng)態(tài)添加style樣式的幾種寫(xiě)法總結(jié)
這篇文章主要介紹了vue中動(dòng)態(tài)添加style樣式的幾種寫(xiě)法總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10

