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


    安装,引用,这些直接从官网拷贝来的,就不多说了。
    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>

  • 相关阅读:
    Mac 配置自定义执行文件 pull.sh,push.sh
    vue-element-admin列表管理
    使用elementui图标
    Mac brew 启动php
    VUE , 表单中如何用获取接口数据的select
    Mac 如何关闭PHPstorm,双击shift快捷键
    spectacle 很好用的应用分屏工具Mac
    面对灵活的配置如何建表,使用json
    mac 下灵活管理node版本
    Node Sass version 6.0.0 is incompatible with^4.0.0
  • 原文地址:https://www.cnblogs.com/xiaozhu-zhu/p/11943603.html
Copyright © 2020-2023  润新知