VUE-地区选择器(V-Distpicker)组件使用

• Z时代
• 2024-01-10
• 分类：综合

安装，引用，这些直接从官网拷贝来的，就不多说了。
1、安装
使用 npm 安装：

npm install v-distpicker --save
使用 yarn 安装

yarn add v-distpicker --save
2、使用

注册组件
注册全局组件
import VDistpicker from \'v-distpicker\'
Vue.component(\'v-distpicker\', VDistpicker);
注册组件
import VDistpicker from \'v-distpicker\'
export default {
  components: { VDistpicker }
}
简单使用
基础
<v-distpicker></v-distpicker>
默认值
<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>
移动端
<v-distpicker type="mobile"></v-distpicker>

3、下面是重点

 1 获取选择的值
 2  
 3 <template>
 4     <button  @click="choose">点我选择区域</button>
 5     <div class="divwrap" v-if="show">
 6         <v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
 7     </div>
 8 </template>
 9  
10 在你引用 v-distpicker 的父组件里面定义几个方法来获取选择的值。
11  
12 <script>
13     import VDistpicker from \'v-distpicker\'
14     export default {
15         name: \'getAddress\',
16         components: { VDistpicker },
17         data() {
18             return {
19                 show:false,
20             }
21         },
22         methods: {
23             choose(){
24                 this.show=!this.show
25             },
26             onChangeProvince(a){
27                 console.log(a)                
28             },
29             onChangeCity(a){
30                 console.log(a)                
31             },
32             onChangeArea(a){
33                 console.log(a)    
34                 this.show=false
35             }            
36         },
37 }
38  
39  
40  
41 **4、样式**
42 你是不是感觉弹出的样式很丑？
43 OK，下面来改改样式
44 <style scoped>
45     .divwrap{
46         height: 400px;
47         overflow-y: auto;
48         position: fixed;
49         left: 0;
50         bottom: 0;
51         width: 100%;
52     }
53     .divwrap>>>.distpicker-address-wrapper{
54         color: #999;
55     }
56     .divwrap>>>.address-header{
57         position: fixed;
58         bottom: 400px;
59         width: 100%;
60         background: #000;
61         color:#fff;
62     }
63     .divwrap>>>.address-header ul li{
64         flex-grow: 1;
65         text-align: center;
66     }
67     .divwrap>>>.address-header .active{
68         color: #fff;
69         border-bottom:#666 solid 8px
70     }
71     .divwrap>>>.address-container .active{
72         color: #000;
73     }
74  
75 </style>

以上是 VUE-地区选择器(V-Distpicker)组件使用 的全部内容， 来源链接： utcz.com/z/378863.html