【vue使用城市选择器】

第一步 引入依赖

npm install v-distpicker --save

第二步 在main.js文件中进行挂载

import VDistpicker from 'v-distpicker'
export default{
  component:{ VDistpicker }
}

第三步 在页面注册引用

import VDistpicker from 'v-distpicker'

components: { VDistpicker },

第四步 定义标签使用

<v-distpicker></v-distpicker>

页面展现效果

添加监听事件获取数据

   <v-distpicker  @province="onChangeProv"
                  @city="onChangeCity"
                  @area="onChangeArea"></v-distpicker>

 onChangeProv (e) {
      console.log("省", e);
    },
    onChangeCity (e) {
      console.log("市", e);
    },
    onChangeArea (e) {
      console.log("县", e);
    },

查看获取到的数据

在监听事件里获取数据并赋值给字段,这样就可以拿到对应的数据存到数据库了!
注: 可添加selected方法 返回省市区的值(选择最后一项时触发)

自定义数据显示

:placeholders="placeholders"

 placeholders: {
        province: '请选择省份',
        city: '请选择市区',
        area: '请选择县城或区',
      },

修改选择框样式

<style lang="scss">
//修改地区选择框样式
.distpicker-address-wrapper {
  select {
    width: 250px !important;
    padding: 0px 10px !important;
    height: 30px !important;
    font-size: 15px !important;
    line-height: 30px !important;
  }
}