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

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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(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

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

示例一：picker的簡(jiǎn)單使用

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顯示出來了

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

分析：

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

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

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

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

示例二：picker的簡(jiǎn)單使用——分組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：

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

分析：

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

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

示例三：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)容

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

分析：

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

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

示例四：獲取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)容

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

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

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

示例五：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è)

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

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

分享文章：vuemint-ui學(xué)習(xí)筆記之picker的使用
URL鏈接：http://muchs.cn/article26/ihsocg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、Google、云服務(wù)器、用戶體驗(yàn)、微信公眾號(hào)、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容