移动端四级地址选择组件开发

地址选择组件的开发，每一项都做好了注释，便于理解。组件在结构上分为两个部分，如图

html 

<div class="address-dialog-con">
          <!-- <span class="loading" v-if="loading"><i></i></span> -->
          <ul class="con-select">
            <li :class="showProvince?'active':''" @click="getArea('showProvince')">{{province}}</li>
            <li :class="showCity?'active':''" v-if="choiceCity" @click="getArea('showCity')">{{city}}</li>
            <li :class="showCounty?'active':''" v-if="choiceCounty" @click="getArea('showCounty')">{{county}}</li>
            <li :class="showTown?'active':''" v-if="choiceTown" @click="getArea('showTown')">{{town}}</li>
          </ul>
          <!-- 省列 -->
          <transition name="fade">
            <ul class="address-province area clearfix" v-if="showProvince">
              <li v-for="item in base.provinceArr" @click="getCity(item.id,item.name)" :class="item.name === province ? 'selected' : ''" :key="item.id">
                {{item.name}}<i v-if="item.name === province"></i>
              </li>
            </ul>
          </transition>
          <!-- 市列 -->
          <transition name="fade">
            <ul class="address-city area clearfix" v-if="showCity">
              <li v-for="item in base.cityArr" @click="getCounty(item.id,item.name)" :class="item.name === city ? 'selected' : ''" :key="item.id">
                {{item.name}}<i v-if="item.name === city"></i>
              </li>
            </ul>
          </transition>
          <!-- 区列 -->
          <transition name="fade">
            <ul class="address-county area clearfix" v-if="showCounty">
              <li v-for="item in base.countyArr" @click="getTown(item.id,item.name)" :class="item.name === county ? 'selected' : ''" :key="item.id">
                {{item.name}}<i v-if="item.name === county"></i>
              </li>
            </ul>
          </transition>
          <!-- 县列 -->
          <transition name="fade">
            <ul class="address-town area clearfix" v-if="showTown">
              <li v-for="item in base.townArr" :key="item.id" @click="getLast(item.id,item.name)">
                {{item.name}}<i v-if="item.name === town"></i>
              </li>
            </ul>
          </transition>
        </div>

其中con-select中存放是的图片中第一部分，下面的四个ul存放的是省市区镇的数据。点击“请选择”的时候需要平滑移动的效果，所以对下面四个ul用到了transition，具体用法可见vue官方教程。

data数据

data () {
    return {
      areaState: areaHandle.state, // 从组件内引入的地址所有数据，有缓存
      loading: false,
      address: {}, // 选中的省市区县
      show: false,
      province: '请选择', // 选择的省名称
      provinceId: undefined,
      city: '请选择', // 选择的市名称
      cityId: undefined,
      county: '请选择', // 选择的区名称
      countyId: undefined,
      town: '请选择', // 最后一级请选择
      townId: undefined,
      choiceProvince: false, // 省按钮的显示隐藏
      choiceCity: false, // 市按钮的显示隐藏
      choiceCounty: false, // 区按钮的显示隐藏
      choiceTown: false, // 镇按钮的显示隐藏
      showProvince: true, // 显示省列
      showCity: false, // 显示市列
      showCounty: false, // 显示区列
      showTown: false // 显示镇列
    }
  }

方法

computed: {
  methods: {
    // 点击tab
    getArea (k) {
      ['showCity', 'showCounty', 'showTown', 'showProvince'].forEach(e => { this[e] = false })
      this[k] = true
    },
    // 点击选择省后
    async getCity (pid, pname) {
      this.province = pname // 选中的省
      this.provinceId = pid
      this.showProvince = false // 省列消失
      this.choiceCity = true // 显示市按钮
      this.showCity = true // 显示市列
      this.city = '请选择'
      this.choiceCounty = false // 隐藏区(非第一次选择)
      this.choiceTown = false // 隐藏镇(非第一次选择)
    },
    // 点击选择市后
    async getCounty (cid, cname) {
      this.city = cname // 选中的市
      this.cityId = cid
      this.showCity = false // 市列消失
      this.choiceCounty = true // 显示区按钮
      this.showCounty = true // 显示区列
      this.county = '请选择'
      this.choiceTown = false // 隐藏镇(非第一次选择)
    },
    // 点击选择区后
    async getTown (coid, coname) {
      this.county = coname // 选中的区
      this.countyId = coid
      // 需要判断有没有四级地址，如果请求失败，走catch的部分，直接到此为止。如果请求成功，则显示四级地址
      try {
        await areaHandle.cacheArea('town', coid)
        this.showCounty = false // 区列消失
        this.showTown = true // 显示镇列
        this.choiceTown = true // 显示镇按钮
      } catch (error) {
        this.town = ''
        this.townId = undefined
        this.upData()
      }
    },
    // 点击选择镇后
    getLast (tid, tname) {
      this.town = tname
      this.townId = tid
      this.upData()
    },
    // 传值给父组件
    upData () {
      let addressNew = {
        province: this.province,
        city: this.city,
        county: this.county,
        town: this.town,
        provinceId: this.provinceId,
        cityId: this.cityId,
        countyId: this.countyId,
        townId: this.townId
      }
      Object.assign(this.address, addressNew)
      this.$emit('address', this.address) // 选中的值传给父组件
      this.show = false
    },
    // 关闭
    close () {
      this.show = false
    }
  }

其中每次点击选择的时候要调取接口获得数据，例如点击省获得市的数据，点击市获得区的数据，这部分的方法隐藏，可根据自己需要的情况适当的添加。