Explication détaillée de l'utilisation du composant de sélection de région (V-Distpicker)

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du composant sélecteur de région (V-Distpicker). Quelles sont les précautions lors de l'utilisation du composant sélecteur de région (V-Distpicker). est un cas pratique, jetons un coup d'oeil ensemble.

L'installation et la citation sont copiées directement depuis le site officiel, je n'entrerai donc pas dans les détails.

1. Installation

Utilisez npm pour installer :

npm install v-distpicker --save

Utilisez du fil pour installer

yarn add v-distpicker --save

2. Utilisez

pour enregistrer le composant

pour enregistrer le composant global

import VDistpicker from 'v-distpicker'
Vue.component('v-distpicker', VDistpicker);

dans enregistrer le composant

import VDistpicker from 'v-distpicker'
export default {
 components: { VDistpicker }
}

Facile à utiliser

Basique

<v-distpicker></v-distpicker>

Valeur par défaut

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

Version mobile

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

3. Voici le point clé :

Obtenir la valeur sélectionnée

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

Définir plusieurs méthodes dans le composant parent où vous faites référence à v-distpicker pour obtenir la valeur sélectionnée.

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

Vous trouvez le style pop-up moche ?

OK, changeons de style

<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, j'ai terminé. . Ce qui précède n'est qu'une introduction. Si quelqu'un a plus d'expérience, n'hésitez pas à commenter

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles sur le site PHP chinois !

Lecture recommandée :

Résumé d'utilisation de React-navigation (avec code)

Ajout, suppression, modification et requête courants opérations des éléments JS DOM Explication détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!