Heim > Web-Frontend > js-Tutorial > Hauptteil

Einführung in die Verwendung der VUE-Region-Selektor-Komponente (V-Distpicker).

不言
Freigeben: 2018-06-29 15:34:39
Original
1913 Leute haben es durchsucht

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
Nach dem Login kopieren

Verwenden Sie Garn, um

yarn add v-distpicker --save
Nach dem Login kopieren

zu installieren. 2. Verwenden Sie

um Komponente zu registrieren

Globale Komponente registrieren

import VDistpicker from 'v-distpicker'
Vue.component('v-distpicker', VDistpicker);
Nach dem Login kopieren

Komponente registrieren

import VDistpicker from 'v-distpicker'
export default {
 components: { VDistpicker }
}
Nach dem Login kopieren

Einfach zu bedienen

Einfach

<v-distpicker></v-distpicker>
Nach dem Login kopieren

Standardwert

<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>
Nach dem Login kopieren

Mobile Version

<v-distpicker type="mobile"></v-distpicker>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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 &#39;v-distpicker&#39;
  export default {
    name: &#39;getAddress&#39;,
    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
      }      
    },
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
vue
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!