ホームページ > 記事 > ウェブフロントエンド > vue mint-ui でのピッカーの使用の概要

vue mint-ui でのピッカーの使用の概要

小云云オリジナル: 2018-01-25 10:37:566374ブラウズ

この記事では主に vue mint-ui のピッカーの使い方を紹介します。編集者がとても良いと思ったので、参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

この記事ではvue mint-ui Pickerの使い方を紹介し、みんなで共有したり、自分用の勉強メモを残しましょう

Pickerの使い方

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

API

例 1: ピッカーの簡単な使用

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: [&#39;年假&#39;, &#39;事假&#39;, &#39;病假&#39;, &#39;婚假&#39;, &#39;其他&#39;]}] 
  } 
 }, 
 mounted:function(){ 
  
 } 
} 
</script> 
  
<style> 
  
</style>

show:

ピッカーが表示されます

分析:

ピンカー表示では上部の空白の半分が残ります

ドラッグすると、オプションは上に確保された空白スペースに実行されます

例 2: ピッカーの簡単な使用 - グループピッカー

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: [&#39;年假&#39;, &#39;事假&#39;, &#39;病假&#39;, &#39;婚假&#39;, &#39;其他&#39;], 
         className: &#39;slot1&#39;, 
         textAlign: &#39;left&#39; 
        }, { 
         pider: true, 
         content: &#39;-&#39;, 
         className: &#39;slot2&#39; 
        }, { 
         flex: 1, 
         values: [&#39;2015-11&#39;, &#39;2015-02&#39;, &#39;2015-03&#39;, &#39;2015-04&#39;, &#39;2015-05&#39;, &#39;2015-06&#39;], 
         className: &#39;slot3&#39;, 
         textAlign: &#39;right&#39; 
        } 
       ] 
  } 
 }, 
 mounted:function(){ 
 
 } 
} 
</script> 
 
<style> 
 
</style>

show:

分析:

1.picker は、左、中央、右の 3 つの部分に分割することもできます - 詳細については、上のスロットオブジェクトを参照してください。属性

は、slots 属性の対応するデータを設定することで配列を受け取ります。配列は 3 つのオブジェクトに分割されます

値に加えて、flex も使用できます (フレキシブルボックスの flex 値、1 は残りのスペースでいっぱいです) )、className (slot1、slot2、slot3 を使用)、textAlign (テキストの水平位置を設定します。左、中央、右を使用できます)

2 各ピッカーのデフォルトの高さは 36px

です。例3:ピッカーは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: &#39;app&#39;, 
 data () { 
  return { 
    slots: 
        [ 
        { 
         flex: 1, 
         values: [&#39;年假&#39;, &#39;事假&#39;, &#39;病假&#39;, &#39;婚假&#39;, &#39;其他&#39;], 
         className: &#39;slot1&#39;, 
         textAlign: &#39;left&#39; 
        }, { 
         pider: true, 
         content: &#39;-&#39;, 
         className: &#39;slot2&#39; 
        }, { 
         flex: 1, 
         values: [&#39;2015-11&#39;, &#39;2015-02&#39;, &#39;2015-03&#39;, &#39;2015-04&#39;, &#39;2015-05&#39;, &#39;2015-06&#39;], 
         className: &#39;slot3&#39;, 
         textAlign: &#39;right&#39; 
        } 
       ] 
  } 
 }, 
 mounted:function(){ 
 
 }, 
 methods: { 
    onValuesChange(picker, values) { 
      console.log(picker) 
      console.log(values) 
  } 
 } 
} 
</script> 
 
<style> 
 
</style>

show:

実行後、changeイベントは自動的にコンテンツを2回出力します

これは、ピッカーが2つあるためですコンテンツを選択します

分析: 列の 1 つをスクロールすると、変更イベントがトリガーされます

例 4: 変更イベントによって選択されたコンテンツを取得します

xxx.vue:

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

show:

ピッカーを開くと、操作がない場合、最初に変更イベントが自動的に実行され、最初のオプションの内容が選択されます

選択した内容をデータに出力します

例5: ピッカーの番号を表示

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: &#39;app&#39;, 
 data () { 
  return { 
    value:&#39;&#39;, 
    slots: 
        [ 
          { 
            values: [&#39;年假&#39;, &#39;事假&#39;, &#39;病假&#39;, &#39;婚假&#39;, &#39;其他&#39;, &#39;婚假&#39;] 
          } 
        ], 
  } 
 }, 
 mounted:function(){ 
 
 }, 
 methods: { 
    onValuesChange(picker, values) { 
   this.value = values[0]; 
   console.log(this.value) 
  } 
 } 
} 
</script> 
 
<style> 
 
</style>

show:

使用: visible-item-count="1"以降、表示できるピッカーの数は1になります

vue mint-ui でのピッカーの使用の概要

関連記事