最近在項目里需要用到地區(qū)選擇器，就找到 V - Distpicker 是一個簡單易用的地區(qū)選擇器。使用非常簡單，功能強大，推薦大家使用。

官網: https://distpicker.pigjian.com

github: https://github.com/jcc/v-distpicker

Installation

npm install v-distpicker --save

Or

yarn add v-distpicker --save

Register global component（注冊全局組件）

import VDistpicker from 'v-distpicker'

Vue.component('v-distpicker', VDistpicker)

Register component（注冊局部組件）

import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker }
}

示例：

示例.png

示例2.png

<template>
    <v-distpicker 
        :province="province" 
        :city="city" 
        :area="area"
        @selected="onSelected">
    </v-distpicker>
<template>

<script>
import VDistpicker from 'v-distpicker'

export default {
    components: { VDistpicker },
    methods:{
        onSelected(data) {
                this.province = data.province.value;
                this.city = data.city.value;
                this.area = data.area.value;
                this.ruleForm.province = this.province;
                this.ruleForm.city = this.city;
                this.ruleForm.area = this.area;
            }
    }
}
</script>

Attributes

Methods