Vue学习笔记-地区选择器

最近在项目里需要用到地区选择器，就找到 V - Distpicker 是一个简单易用的地区选择器。使用非常简单，功能强大，推荐大家使用。

官网: 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