Vue<地区选择器(v-distpicker)使用>

效果图：

image.png
插件的如何使用官方文档说的很清楚了，此处只是简单的说下怎么应用~~
官方地址请参考https://distpicker.pigjian.com/
image.png

 <v-distpicker @selected="regionSelect" hide-area></v-distpicker>

import VDistpicker from "v-distpicker";
export default {
  components: {
    "v-distpicker":VDistpicker
  },
  data() {
    return {
      applyForm: {
        region: {
          province: "",
          city: ""
        }
      }
    };
  },
  methods:{
      //地区选择方法
      regionSelect(data){
       this.applyForm.region.province = data.province
       this.applyForm.region.city = data.city
      }
  }
};

更改样式的话，我是直接通过scss样式修改的具体大小可自行调节

//修改地区选择框样式
.distpicker-address-wrapper {
  select {
    padding: 0px 10px !important;
    height: 30px !important;
    font-size: 15px !important;
    line-height: 30px !important;
  }
}