Verwendung der VUE-Region-Selektor-Komponente (V-Distpicker).

Dieser Artikel stellt hauptsächlich die Verwendung der VUE-Region-Selektor-Komponente (V-Distpicker) vor. Jetzt kann ich ihn mit Ihnen teilen.

Nein Unsinn. Sagen Sie mehr und kommen Sie 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 &#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
      }      
    },
}

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 Übertragungsbeispiel

Das obige ist der detaillierte Inhalt vonVerwendung der VUE-Region-Selektor-Komponente (V-Distpicker).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!