點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

vuemint-ui中picker的使用方法介紹

來源：懂視網責編：小OO 時間：2020-11-27 20:04:50

vuemint-ui中picker的使用方法介紹

本文介紹了vue mint-ui picker的使用，分享給大家，也給自己留個學習筆記。Picker的使用；；API；示例一：picker的簡單使用。xxx.vue。；

推薦度：

點擊下載本文 文檔為doc格式

導讀本文介紹了vue mint-ui picker的使用，分享給大家，也給自己留個學習筆記。Picker的使用；；API；示例一：picker的簡單使用。xxx.vue。；

本文主要介紹了vue mint-ui學習筆記之picker的使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能幫助到大家。

本文介紹了vue mint-ui picker的使用，分享給大家，也給自己留個學習筆記

Picker的使用

API

示例一：picker的簡單使用

xxx.vue：

<template> 
 <p id="app"> 
 <mt-picker :slots="slots" ></mt-picker> 
 
 <router-view></router-view> 
 </p> 
</template> 
 
<script> 
 
export default { 
 data () { 
 return { 
 slots:[{values: ['年假', '事假', '病假', '婚假', '其他']}] 
 } 
 }, 
 mounted:function(){ 
 
 } 
} 
</script> 
 
<style> 
 
</style>

show：

picker顯示出來了

分析：

pincker的顯示，會在上方留下一半的白

當拖動的時候，選項就會跑到上方預留的空白位置

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

xxx.vue：

<template> 
 <p id="app"> 
 <mt-picker :slots="slots" ></mt-picker> 
 
 <router-view></router-view> 
 </p> 
</template> 
 
<script> 
 
export default { 
 data () { 
 return { 
 slots: 
 [ 
 { 
 flex: 1, 
 values: ['年假', '事假', '病假', '婚假', '其他'], 
 className: 'slot1', 
 textAlign: 'left' 
 }, { 
 pider: true, 
 content: '-', 
 className: 'slot2' 
 }, { 
 flex: 1, 
 values: ['2015-11', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], 
 className: 'slot3', 
 textAlign: 'right' 
 } 
 ] 
 } 
 }, 
 mounted:function(){ 
 
 } 
} 
</script> 
 
<style> 
 
</style>

show：

分析：

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

通過slots屬性的設置對應的數據，接收一個數組，數組里面分3個對象

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

2.每個picker的高度默認是36px

示例三：picker使用change事件

xxx.vue：

<template> 
 <p id="app"> 
 <mt-picker :slots="slots" @change="onValuesChange" ></mt-picker> 
 <router-view></router-view> 
 </p> 
</template> 
 
<script> 
 
export default { 
 name: 'app', 
 data () { 
 return { 
 slots: 
 [ 
 { 
 flex: 1, 
 values: ['年假', '事假', '病假', '婚假', '其他'], 
 className: 'slot1', 
 textAlign: 'left' 
 }, { 
 pider: true, 
 content: '-', 
 className: 'slot2' 
 }, { 
 flex: 1, 
 values: ['2015-11', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], 
 className: 'slot3', 
 textAlign: 'right' 
 } 
 ] 
 } 
 }, 
 mounted:function(){ 
 
 }, 
 methods: { 
 onValuesChange(picker, values) { 
 console.log(picker) 
 console.log(values) 
 } 
 } 
} 
</script> 
 
<style> 
 
</style>

show：

運行后，change事件會自動輸出2次內容

這是因為，這里面有2個picker可以選擇內容

分析：

當滾動其中一列的時候，又會觸發change事件

示例四：獲取change事件所選的內容

xxx.vue：

<template> 
 <p id="app"> 
 <mt-picker :slots="slots" @change="onValuesChange" ></mt-picker> 
 <router-view></router-view> 
 </p> 
</template> 
 
<script> 
 
export default { 
 name: 'app', 
 data () { 
 return { 
 value:'', 
 slots: 
 [ 
 { 
 values: ['年假', '事假', '病假', '婚假', '其他', '婚假'] 
 } 
 ] 
 } 
 }, 
 mounted:function(){ 
 
 }, 
 methods: { 
 onValuesChange(picker, values) { 
 this.value = values[0]; 
 console.log(this.value) 
} 
 } 
} 
</script> 
 
<style> 
 
</style>

show：

開啟picker的時候，在沒有操作的時候，會先自動執行一次change事件，選中第一個選項的內容

更改選擇的內容，輸出了data內的數據

示例五：picker的顯示個數

xxx.vue：

<template> 
 <p id="app"> 
 <mt-picker :slots="slots" @change="onValuesChange" :visible-item-count="1"></mt-picker> 
 <router-view></router-view> 
 </p> 
</template> 
 
<script> 
 
export default { 
 name: 'app', 
 data () { 
 return { 
 value:'', 
 slots: 
 [ 
 { 
 values: ['年假', '事假', '病假', '婚假', '其他', '婚假'] 
 } 
 ], 
 } 
 }, 
 mounted:function(){ 
 
 }, 
 methods: { 
 onValuesChange(picker, values) { 
 this.value = values[0]; 
 console.log(this.value) 
 } 
 } 
} 
</script> 
 
<style> 
 
</style>

show：

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