Vue 2.x折腾记 - (8) 写一个挺靠谱的多地区选择组件

前言

这个不是三级联动的地址组件,这是在这个基础需求上增加多地区选择的功能;

我也不想这么个玩意的,但是产品需求就是有这么个东东。

上基友社区找了下,又木有这类型的组件，只能自己动手丰衣足食了。

虽然过程遇到了许许多多的坑点,但总算是搞出来了。

效果图

功能点:

• 支持不限城市,不限地区(这个东西的实现…真心死磕了挺久) – 左右两边数据的同步
• 地区一次性多选,若是选择了所有地区会自动转为不限地区
• 数据迁移箭头的判断…选中数据才会有对应的按钮可以点击
• 已选位置的数据同步响应调用的地方,当然也可以外部传入…(新增传出,编辑依赖传入再组合)
• 箭头是iconfont,支持外部传入,默认是我这边的cdn的啦…

!!!这是一个独立的组件,css预处理是用的scss;

写的过程遇到的问题:

• 因为这个功能会多次需要切换省份城市这些,所以我一次性拉取所有数据存储到localstorage,不然请求接口次数太多了
• 一开始的不限城市和不限地区我想并入JSON(重组JSON),但是发现虽然能降低处理麻烦,但是数据更乱了…非常不好维护,也有其他组件调用这个JSON的地方(比如其他组件有个地址的三级联动也是依赖这个JSON)
• 还有一个就是要考虑两边有不限制这东东的时候,要剔除不能存在的数据,比如你不限制城市,那所有该省份的城市都要干掉,不限制地区也是类似
• 写左右两边数据的对比是最恶心的,为什么这么说呢?
• 左边三级联动的,每个子项都有自己的id和name, 而选择的是组合成的(看GIF图),中间是中划线隔开,这对于推入和推出就带来一堆遍历和比较
• 我们这边的后端大佬说不限制的id均为0(城市或者地区),所以这个需要自行组合,最后就是动态图那格式的ID就是后台接受的,多地区再拼接成字符串…'3-13-2,2-44-3,4-0-0'这种提交到后台…

联动JSON数据格式

• regionName: 项的名称
• regionId: 项的ID
• child: 是否包含有子项

本来想写个props映射下regionName,regionId,child; 但是感觉作用不大,就没写了,(一般公司的地区JSON格式定下来了之后变动的可能性太低)

你能学到什么?

1: 数组的比对,数组的遍历,数组的组合及响应判断
2: vue一些内置指令的使用
3: 组件功能细节的考虑,不限制地区,全部这些按钮在什么情况下能点击
4: 清空数据之后各个状态的恢复和重置等等

代码

manyAreaSelect.vue

<template>
  <div class="manyAreaSelect">
    <div class="item">
      <div class="item-title">
        <span> 选择省</span>
      </div>
      <div class="item-content">
        <ul>
          <li v-for="(item,index) in chinaArea" :class="item.selected?'active':''" :key="index" @click="getCityList(item)">{
  {item.regionName}}</li>
        </ul>
      </div>
      <div class="item-footer"></div>
    </div>
    <div class="item">
      <div class="item-title">
        <span>选择市</span>
      </div>
      <div class="item-content">
        <ul v-show="cityList.length===0">
          <li><<请选择省份</li>
        </ul>
        <ul v-show="!notLimitButton.notLimitCity &&cityList.length!==0">
          <li v-for="(item,index) in cityList" :class="item.selected ? 'active':''" :key="index" @click="getDistricList(item)">{
  {item.regionName}}</li>
        </ul>
      </div>
      <div class="item-footer">
        <button type="button" class="button" :class="notLimitButton.notLimitCity?'success':''" @click="cityNotLitmit({regionName:'不限',regionId:'0'})"  :disabled="!selectItem.province.regionName">不限城市</button>
      </div>
    </div>
    <div class="item">
      <div class="item-title">
        <span>选择地区</span>
      </div>
      <div class="item-content">
        <ul v-show="districList.length===0">
          <li>
            <<请选择城市</li>
        </ul>
        <ul v-show="!notLimitButton.notLimitCity && !notLimitButton.notLimitDistrict && districList.length!==0">
          <li v-for="(item,index) in districList" :class="item.selected?'active':''" :key="index" @click="getAreaCombineID(item)">{
  {item.regionName}}</li>
        </ul>
      </div>
      <div class="item-footer">
        <button type="button" class="button" :class="notLimitButton.notLimitDistrict ?'success':''" @click="districNotLitmit({regionName:'不限',regionId:'0'})" :disabled="!selectItem.city.regionName ||!selectItem.province.regionName || notLimitButton.notLimitCity ">不限地区</button>
      </div>
    </div>
    <div class="trangle">
      <div class="trangle-wrap">
        <div class="left">
          <button type="button" class="button" @click="transferToRight" :disabled="direactionStatusToRight">
            <i :class=