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>