本文介紹了vue mint-ui picker的使用，分享給大家，也給自己留個(gè)學(xué)習(xí)筆記

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了珙縣免費(fèi)建站歡迎大家使用！

Picker的使用

import { Picker } from 'mint-ui';
Vue.component(Picker.name, Picker);

API

示例一：picker的簡單使用

xxx.vue：

show：

picker顯示出來了

分析：

pincker的顯示，會(huì)在上方留下一半的白 

當(dāng)拖動(dòng)的時(shí)候，選項(xiàng)就會(huì)跑到上方預(yù)留的空白位置

示例二：picker的簡單使用——分組picker

xxx.vue：

show：

分析：

1.picker還可以拆分成左中右3個(gè)部分——具體可以看上面的slot對(duì)象的屬性

通過slots屬性的設(shè)置對(duì)應(yīng)的數(shù)據(jù)，接收一個(gè)數(shù)組，數(shù)組里面分3個(gè)對(duì)象

對(duì)象內(nèi)除了可以使用values外，還可以使用flex（彈性盒子的flex值，1是充滿剩余空間），className（使用slot1、slot2、slot3），textAlign（設(shè)置文字的水平位置，可以使用left、center、right）

2.每個(gè)picker的高度默認(rèn)是36px

示例三：picker使用change事件

xxx.vue：

show：

運(yùn)行后，change事件會(huì)自動(dòng)輸出2次內(nèi)容

這是因?yàn)椋@里面有2個(gè)picker可以選擇內(nèi)容

分析：

當(dāng)滾動(dòng)其中一列的時(shí)候，又會(huì)觸發(fā)change事件

示例四：獲取change事件所選的內(nèi)容

xxx.vue：

show：

開啟picker的時(shí)候，在沒有操作的時(shí)候，會(huì)先自動(dòng)執(zhí)行一次change事件，選中第一個(gè)選項(xiàng)的內(nèi)容

更改選擇的內(nèi)容，輸出了data內(nèi)的數(shù)據(jù)

示例五：picker的顯示個(gè)數(shù)

xxx.vue：

show：

使用了:visible-item-count="1"之后，picker的可顯示個(gè)數(shù)就變成了1個(gè)

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。