快捷導(dǎo)航

vue mint-ui學(xué)習(xí)筆記之picker的使用

更新時(shí)間：2017年10月11日 11:06:09 作者：michael_ouyang

本篇文章主要介紹了vue mint-ui學(xué)習(xí)筆記之picker的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

Picker的使用

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

API

示例一：picker的簡單使用

xxx.vue：

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

show：

picker顯示出來了

分析：

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

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

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

xxx.vue：

<template> 
 <div id="app"> 
  <mt-picker :slots="slots" ></mt-picker> 
   
  <router-view></router-view> 
 </div> 
</template> 
 
<script> 
 
export default { 
 data () { 
  return { 
    slots: 
        [ 
        { 
         flex: 1, 
         values: ['年假', '事假', '病假', '婚假', '其他'], 
         className: 'slot1', 
         textAlign: 'left' 
        }, { 
         divider: 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個(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：

<template> 
 <div id="app"> 
  <mt-picker :slots="slots" @change="onValuesChange" ></mt-picker>  
  <router-view></router-view> 
 </div> 
</template> 
 
<script> 
 
export default { 
 name: 'app', 
 data () { 
  return { 
    slots: 
        [ 
        { 
         flex: 1, 
         values: ['年假', '事假', '病假', '婚假', '其他'], 
         className: 'slot1', 
         textAlign: 'left' 
        }, { 
         divider: 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：

運(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：

<template> 
 <div id="app"> 
  <mt-picker :slots="slots" @change="onValuesChange" ></mt-picker>  
  <router-view></router-view> 
 </div> 
</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的時(shí)候，在沒有操作的時(shí)候，會(huì)先自動(dòng)執(zhí)行一次change事件，選中第一個(gè)選項(xiàng)的內(nèi)容

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

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

xxx.vue：

<template> 
 <div id="app"> 
  <mt-picker :slots="slots" @change="onValuesChange" :visible-item-count="1"></mt-picker>  
  <router-view></router-view> 
 </div> 
</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的可顯示個(gè)數(shù)就變成了1個(gè)