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/

本文转载于猿2048:V - Distpicker 一个简单易用的地区选择器

标签：province,city,Distpicker,distpicker,VDistpicker,易用,let,citys,选择器
来源： https://www.cnblogs.com/baimeishaoxia/p/12835426.html