vue中地区选择器 v-distpicker

 

如上图所示，前端需要用到省/市/区的地区选择器的情况，这个时候可以使用v-distpicker插件。
官方访问地址：https://www.npmjs.com/package/v-distpicker

使用方法访问地址：https://jcc.github.io/v-distpicker/

1.在vue中安装

npm install v-distpicker --save

2.在vue中引入

import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker }
}

3.html代码

<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>

如果是动态传值的话

3.1.先在data里面定义

      form: {
        province: '',
        city: '',
        area: ''
      },

3.2.在html代码中通过vue语法来引入动态变量

        <el-form-item label="省/市/区" :label-width="formLabelWidth" prop="account" required>
          <v-distpicker :province="form.province" :city="form.city" :area="form.area"></v-distpicker>
        </el-form-item>

3.3.效果展示

4.js代码

在v-distpicker的使用文档中，有关于该插件的相关事件的使用介绍，如下：

 利用province、city、area事件来获取选中的内容

4.1.html代码部分

 4.2.js代码部分

 

 4.3.前端页面效果展示