Einführung in die Verwendung von Picker in Vue Mint-UI-js-Tutorial-php.cn

Einführung in die Verwendung von Picker in Vue Mint-UI

小云云

Freigeben： 2018-01-25 10:37:56

Original

6430 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von Picker in Vue-Mint-UI-Studiennotizen vorgestellt. Der Herausgeber findet es ziemlich gut. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

In diesem Artikel wird die Verwendung des Vue Mint-UI-Pickers vorgestellt. Teilen Sie ihn mit allen und hinterlassen Sie eine Lernnotiz für sich selbst.

Verwendung des Pickers

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

Nach dem Login kopieren

API

Beispiel 1: Einfache Verwendung des Pickers

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>

Nach dem Login kopieren

zeigen:

Der Picker wird angezeigt

Analyse:

Bei der rosafarbenen Anzeige bleibt oben die Hälfte des Leerraums übrig

Beim Ziehen werden die Optionen in den über der Position reservierten Bereich verschoben

Beispiel 2: Einfache Verwendung des Pickers – Gruppierungspicker

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>

Nach dem Login kopieren

zeigen:

Analyse:

1.picker ist in Ordnung Aufgeteilt in 3 Teile: links, in der Mitte und rechts - für Details können Sie die Attribute des Slot-Objekts oben sehen

Durch Festlegen der entsprechenden Daten des Slot-Attributs wird ein Array empfangen und das Array wird angezeigt In 3 Objekte unterteilt

Zusätzlich zur Verwendung von Werten innerhalb des Objekts können Sie auch Flex (den Flex-Wert der flexiblen Box, 1 bedeutet, den verbleibenden Platz auszufüllen), className (mit Slot1) verwenden , Slot2, Slot3), textAlign (Festlegen der horizontalen Position des Textes, Sie können links, zentriert, rechts verwenden)

2. Die Standardhöhe jedes Pickers beträgt 36px

Beispiel 3: Picker Change-Ereignis verwenden

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>

Nach dem Login kopieren

show:

Nach der Ausführung gibt das Änderungsereignis den Inhalt automatisch zweimal aus

Dies liegt daran, dass es zwei Picker gibt, die den Inhalt auswählen können

Analyse:

Beim Scrollen einer der Spalten wird das Änderungsereignis ausgelöst

Beispiel 4: Durch das Änderungsereignis ausgewählten Inhalt abrufen

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>

Nach dem Login kopieren

zeigen:

Wenn die Auswahl aktiviert ist und keine Operation erfolgt, wird zuerst automatisch ein Änderungsereignis ausgeführt. und der Inhalt der ersten Option wird ausgewählt

Ändern Sie den ausgewählten Inhalt und geben Sie die Daten in Daten aus

Beispiel 5: Anzahl der Kommissionierer anzeigen

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>

Nach dem Login kopieren

show:

Nach der Verwendung von:visible-item-count="1" beträgt die Anzahl der anzeigbaren Picker 1

Verwandte Empfehlungen:

Mintui-Picker-Selektor in Vue, um eine sekundäre Verknüpfung mit der Stadt zu erreichen

Detaillierte Erklärung zur Verwendung des Bootstrap-Zeitsteuerungs-Daterangepickers

Ein einfaches Anwendungsbeispiel der WeChat-Applet-Auswahlkomponente

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Picker in Vue Mint-UI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!