标签：province city Distpicker distpicker VDistpicker 易用 let citys 选择器

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。