V - Distpicker 一個簡單易用的地區選擇器

1下載

npm install v-distpicker --save

or

yarn add v-distpicker --save

2配置

1)在main.js中引用

import VDistpicker from 'v-distpicker' // 引入省市選擇器

Vue.component('v-distpicker', VDistpicker) // 註冊組件

3使用

import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker }
}

這就已經配置完了 可使用了

附上個人代碼

<template>
  <div>
    <label>所在地：</label>

    <!--城市選擇器-->
    <v-distpicker @selected="onSelected" :province="select.province" :city="select.city" :placeholders="placeholders" id="city" hide-area></v-distpicker>

    <br>
    <label></label>
    <input :name="cites" type="text" v-model="cityDetails" @change="thisBlur" @blur="thisBlur" class="city_details" placeholder="填寫詳細地址">
  </div>
</template>

<script>
  import VDistpicker from 'v-distpicker' // 城市選擇器
  export default {
   name: 'citySelect',
    props: ['cites'],
    data() {
    return{
        placeholders: {
          province: '請選擇所在省份',
          city: '請選擇所在城市',
        },
        select: {
         province: '',
          city: '',
        },
        citys: '', // 傳給父組件的值
        cityDetails: '', // 詳情的內容
        upNum: 0
      }
    },
    components: {
      'v-distpicker': VDistpicker

    },


    updated: function () {
//    console.log(this.cites)
    if (this.upNum === 0) {
        if (this.cites != '') {

          // 先分割
          let china = this.cites.split(/(省|自治區|市|特別行政區)/)

          // 取出省
          let province = china[0] + china[1]

          // 在刪除省 在分割
          let ttt = china.splice(2).join().split(/(市轄區|市|區|盟|自治州)/)

          // 取出市
          let citybefore = ttt[0] + ttt[1]
          let actionCity = citybefore.split(',').join('')

          // 在刪除市 取出詳情
          let details = ttt.splice(2).join()

          // 若是他們知足條件就讓他們市爲市轄區
          if (province === '北京市'|| province === '上海市' || province === '天津市' ||province ===  '重慶市') {
            actionCity = '市轄區'
            details = details.substr(5)
          }

//正常子父組件中傳值  給子組件  子組件在mounted中獲取不動啊, 因此要讓他觸發updated函數  

          // 默認的省
          this.select.province = province
          // 默認的市
          this.select.city = actionCity

          // 詳細 // 最終造成的就是詳情
          this.cityDetails = details.split(',').join('')

          //      console.log(province,city,details)
        }

      }
    this.upNum++
//      console.log(this.upNum)
    },


    methods: {
      // 城市選擇
      onSelected: function (data) {
        this.citys = data.province.value + data.city.value
        this.$emit('city', this.citys + this.cityDetails)
//        console.log(this.citys)

      },
      thisBlur: function () {
//        console.log(this.citys + this.cityDetails)
        this.$emit('city', this.citys + this.cityDetails)
      }

    }
  }
</script>

最後附上原網址

https://distpicker.iline.co/