Ausführliche Erläuterung der Verwendung der Regionsauswahlkomponente (V-Distpicker).

Dieses Mal werde ich Ihnen die Verwendung der Regionsauswahlkomponente (V-Distpicker) ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Regionsauswahlkomponente (V-Distpicker)? ist ein praktischer Koffer, schauen wir uns das gemeinsam an.

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 zur Installation

yarn add v-distpicker --save

2. Verwenden Sie

Komponente 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 verwenden

Basic

<v-distpicker></v-distpicker>

Standardwert

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

Mobile Version

<v-distpicker type="mobile"></v-distpicker>

3. Im Folgenden sind die wichtigsten Punkte aufgeführt

Den ausgewählten Wert abrufen

<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 abzurufen.

<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 gerne einen Kommentar abgeben.

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

React-Navigation-Nutzungszusammenfassung (mit Code)

Allgemeines Hinzufügen, Löschen, Ändern und Abfragen Operationen von JS-DOM-Elementen Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung der Regionsauswahlkomponente (V-Distpicker).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!