V - Distpicker 是一个简单易用的地区选择器

如何安装

npm install v-distpicker --save

或者

yarn add v-distpicker --save

注册全局组件

import VDistpicker from 'v-distpicker'

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

注册局部组件

import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker }
}

基本使用

<template>
  <v-distpicker></v-distpicker>
<template>

<script>
import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker },
}
</script>

占位符

<template>
  <v-distpicker :placeholders="placeholders"></v-distpicker>
<template>

<script>
import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker },
  data() {
      return {
          placeholders: {
              province: '------- 省 --------',
              city: '--- 市 ---',
              area: '--- 区 ---',
          }
      }
  }
}
</script>

原始值

<template>
  <v-distpicker :province="select.province" :city="select.city" :area="select.area"></v-distpicker>
<template>

<script>
import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker },
  data() {
    return {
      select: { province: '广东省', city: '广州市', area: '海珠区' },
    }
  },
}
</script>

隐藏区

<template>
  <v-distpicker hide-area></v-distpicker>
<template>

<script>
import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker },
}
</script>

只有省

<template>
  <v-distpicker only-province></v-distpicker>
<template>

<script>
import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker },
}
</script>

事件触发

<template>
  <v-distpicker @selected="onSelected"></v-distpicker>
<template>

<script>
import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker },
  methods: {
    onSelected(data) {
      alert(data.province + ' | ' + data.city + ' | ' + data.area)
      console.log(data)
    },
  }
}
</script>