免費(fèi)AI編程助手
Mint UI 選擇器-Picker
選擇器，支持多 slot 聯(lián)動(dòng)。
引入
import { Picker } from 'mint-ui';
Vue.component(Picker.name, Picker);
例子
傳入 ?slots?，當(dāng)被選中的值發(fā)生變化時(shí)觸發(fā) ?change? 事件。?change? 事件有兩個(gè)參數(shù)，分別為當(dāng)前? picker? 的 ?vue? 實(shí)例和各 ?slot ?被選中的值組成的數(shù)組
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入樣式 -->
<link rel="stylesheet" rel="external nofollow" target="_blank" >
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<div id="app">
<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js" rel="external nofollow" ></script>
<!-- 引入組件庫(kù) -->
<script src="https://unpkg.com/mint-ui/lib/index.js" rel="external nofollow" ></script>
<script>
new Vue({
el: '#app',
methods: {
onValuesChange(picker, values) {
if (values[0] > values[1]) {
picker.setSlotValue(1, values[0]);
}
}
},
data() {
return {
slots: [
{
flex: 1,
values: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12'],
className: 'slot1',
textAlign: 'right'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12'],
className: 'slot3',
textAlign: 'left'
}
]
};
}
})
</script>
</html>
嘗試一下 ?
change 事件
在 change 事件中，可以使用注冊(cè)到 picker 實(shí)例上的一些方法：
- ?
getSlotValue(index)?：獲取給定 slot 目前被選中的值 - ?
setSlotValue(index, value)?：設(shè)定給定 slot 被選中的值，該值必須存在于該 slot 的備選值數(shù)組中 - ?
getSlotValues(index)?：獲取給定 slot 的備選值數(shù)組 - ?
setSlotValues(index, values)?：設(shè)定給定 slot 的備選值數(shù)組 - ?
getValues()?：獲取所有 slot 目前被選中的值（分隔符 slot 除外） - ?
setValues(values)?：設(shè)定所有 slot 被選中的值（分隔符 slot 除外），該值必須存在于對(duì)應(yīng) slot 的備選值數(shù)組中
slots
綁定到? slots ?屬性的數(shù)組由對(duì)象組成，每個(gè)對(duì)象都對(duì)應(yīng)一個(gè) ?slot?，它們有如下鍵名
| key | 描述 |
|---|---|
| divider | 對(duì)應(yīng) slot 是否為分隔符 |
| content | 分隔符 slot 的顯示文本 |
| values | 對(duì)應(yīng) slot 的備選值數(shù)組。若為對(duì)象數(shù)組，則需在 mt-picker 標(biāo)簽上設(shè)置 value-key屬性來(lái)指定顯示的字段名 |
| defaultIndex | 對(duì)應(yīng) slot 初始選中值，需傳入其在 values 數(shù)組中的序號(hào)，默認(rèn)為 0 |
| textAlign | 對(duì)應(yīng) slot 的對(duì)齊方式 |
| flex | 對(duì)應(yīng) slot CSS 的 flex 值 |
| className | 對(duì)應(yīng) slot 的類名 |
API
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| slots | slot 對(duì)象數(shù)組 | Array | [] | |
| valueKey | 當(dāng) values 為對(duì)象數(shù)組時(shí)，作為文本顯示在 Picker 中的對(duì)應(yīng)字段的字段名 | String | '' | |
| showToolbar | 是否在組件頂部顯示一個(gè) toolbar，內(nèi)容自定義 | Boolean | false | |
| visibleItemCount | slot 中可見備選值的個(gè)數(shù) | Number | 5 | |
| itemHeight | 每個(gè) slot 的高度 | Number | 36 |
Slot
| name | 描述 |
|---|---|
| - | 當(dāng) showToolbar 為 true 時(shí)，toolbar 中的內(nèi)容 |
更多建議：