Maison > Article > interface Web > Utilisation du composant de sélection de région VUE (V-Distpicker)
Cet article présente principalement l'utilisation du composant de sélection de région VUE (V-Distpicker). Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
Non. c'est un non-sens. Dites-en plus et allez 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 '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
Est-ce que vous sentez 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
Recommandations associées :
Données des composants parent-enfant de la classe de formulaire Vue. exemple de transfert
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!