In diesem Artikel werden hauptsächlich die detaillierten Erfahrungen mit der Verwendung der VUE-Region-Selektorkomponente (V-Distpicker) vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.
Kommen wir ohne weitere Umschweife direkt zur Sache.
Installation und Zitat werden direkt von der offiziellen Website kopiert, daher werde ich nicht auf Details eingehen.
1. Installation
Verwenden Sie npm zur Installation:
npm install v-distpicker --save
Verwenden Sie Garn, um
yarn add v-distpicker --save
zu installieren. 2. Verwenden Sie
um Komponente zu registrieren
Globale Komponente registrieren
import VDistpicker from 'v-distpicker' Vue.component('v-distpicker', VDistpicker);
Komponente registrieren
import VDistpicker from 'v-distpicker' export default { components: { VDistpicker } }
Einfach zu bedienen
Einfach
<v-distpicker></v-distpicker>
Standardwert
<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>
Mobile Version
<v-distpicker type="mobile"></v-distpicker>
3. Hier sind die wichtigsten Punkte
Get Selected value
<template> <button @click="choose">点我选择区域</button> <p class="pwrap" v-if="show"> <v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker> </p> </template>
Definieren Sie mehrere Methoden in der übergeordneten Komponente, in der Sie auf v-distpicker verweisen, um den ausgewählten Wert zu erhalten.
<script> import VDistpicker from 'v-distpicker' export default { name: 'getAddress', components: { VDistpicker }, data() { return { show:false, } }, methods: { choose(){ this.show=!this.show }, onChangeProvince(a){ console.log(a) }, onChangeCity(a){ console.log(a) }, onChangeArea(a){ console.log(a) this.show=false } }, }
4. Stil
Finden Sie den Pop-up-Stil hässlich? ?
OK, lass uns den Stil ändern
<style scoped> .pwrap{ height: 400px; overflow-y: auto; position: fixed; left: 0; bottom: 0; width: 100%; } .pwrap>>>.distpicker-address-wrapper{ color: #999; } .pwrap>>>.address-header{ position: fixed; bottom: 400px; width: 100%; background: #000; color:#fff; } .pwrap>>>.address-header ul li{ flex-grow: 1; text-align: center; } .pwrap>>>.address-header .active{ color: #fff; border-bottom:#666 solid 8px } .pwrap>>>.address-container .active{ color: #000; } </style>
OK, ich bin fertig. . Das Obige ist nur eine Einführung. Wenn jemand mehr Erfahrung hat, können Sie es gerne kommentieren.
Das Obige ist der gesamte Inhalt dieses Artikels Inhalt, achten Sie bitte auf die chinesische PHP-Website!
Verwandte Empfehlungen:
v-zum Laden der lokalen statischen Bildmethode in Vue
Über den Vue Virtual Dom Patch-Quellcode Analyse
Wie man Vue-Ressourcen nutzt, um die Interaktion in VUE abzuschließen
Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung der VUE-Region-Selektor-Komponente (V-Distpicker).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!