安装,引用,这些直接从官网拷贝来的,就不多说了。
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 100%; 52 } 53 .divwrap>>>.distpicker-address-wrapper{ 54 color: #999; 55 } 56 .divwrap>>>.address-header{ 57 position: fixed; 58 bottom: 400px; 59 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>