Introduction à l'utilisation du composant sélecteur de région VUE (V-Distpicker)

Cet article présente principalement l'expérience détaillée de l'utilisation du composant de sélection de région VUE (V-Distpicker). Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Sans plus attendre, allons droit au but.

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

Enregistrer le composant

Enregistrer le composant global

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

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 . Ce qui suit est Points clés

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 quelques valeurs dans. le composant parent où vous référencez la méthode v-distpicker pour obtenir la valeur sélectionnée.

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

Pensez-vous que le pop-up le style est très 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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. contenu, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

v-pour charger la méthode d'image statique locale dans vue

À propos du code source du correctif vue virtual dom Analyse

Comment utiliser Vue-resource pour compléter l'interaction dans VUE

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!