vue3中使用省市二级 时间选择器（Distpicker插件）

 首先，官网搜索下载插件引入插件。然后在页面直接使用。

（下载有错的时候 npm install v-distpicker@^2.1.0 --save）

1.

yarn add v-distpicker --save

2. 

 main.js

import VDistpicker from 'v-distpicker'
// 添加到全局
app.component('v-distpicker', VDistpicker)

3.页面使用

import VDistpicker from "v-distpicker";

 

 

 代码：

        <v-distpicker
          v-if="item.type == 'space'"
          v-model="form[item.key]"
          @selected="selected"
          hide-area
          :province="nativePlace.province"
          :city="nativePlace.city"
        ></v-distpicker>

let nativePlace = reactive({
  provice: "",
  city: "",
});

function selected(info) {
  form.nativePlace = info.province.value + "," + info.city.value;
  nativePlace = {
    province: info.province.value,
    city: info.city.value,
  };
  // formRef.value.validateField('nativePlace')
}

 注意：后台返回的地区格式是

注意：需要三级 省市区 的话就去掉hide-area