vueApp+mint-ui自定义地址选择(二)

作者: chan_it | 来源:发表于2019-08-09 10:56 被阅读0次

需求：让省市区联级选择看起来一目了然，不要滑动式的省市区联级选择，需要下面这样子的效果。
在选择完三级地址后，让mt-popup关闭，把值赋到输入框。

图片.png

主要代码

子组件AddrSelect.vue

<template>
  <div class="addr">
    <div class="addr_keyboard">

      <div class="addr_province_box" v-if="show_province">
        <mt-button
          v-for="addr in address.province"
          :key="addr.id"
          @click="checkProvince(addr)"
        >{{addr.name}}</mt-button>
      </div>

      <div class="addr_province_box addr_city_box" v-if="show_city">
        <div class="back"><span @click="backUpper('city')">返回上一级</span></div>
        <mt-button
          v-for="addr in addressCity"
          :key="addr.id"
          @click="checkCity(addr)"
        >{{addr.name}}</mt-button>
      </div>

      <div class="addr_province_box addr_ared_box" v-if="show_area">
        <div class="back"><span @click="backUpper('area')">返回上一级</span></div>
        <mt-button
          v-for="addr in addressArea"
          :key="addr.id"
          @click="checkArea(addr)"
        >{{addr.name}}</mt-button>
      </div>

    </div>
  </div>
</template>

<script>
import addre from '@/components/addre.json'

export default {
  name: 'AddressSelection',

  data () {
    return {
      show_province: true,
      show_city: false,
      show_area: false,

      addr_Str: '',
      addr_Arr: [],

      address: addre,
      addressCity: [],
      addressArea: []
    }
  },

  methods: {
    checkProvince (addr) {
      this.addr_Arr.push(addr.name)

      this.addressCity = this.address.city.filter((item) => {
        return item.parentId === addr.id
      })

      this.show_province = false
      this.show_city = true
      this.show_area = false
    },

    checkCity (addr) {
      this.addr_Arr.push(addr.name)

      this.addressArea = this.address.area.filter((item) => {
        return item.parentId === addr.id
      })

      this.show_province = false
      this.show_city = false
      this.show_area = true
    },

    checkArea (addr) {
      this.addr_Arr.push(addr.name)

      this.addr_Str = this.addr_Arr.join('')
      this.publishEvent()
      // 父组件在接收到完整地址后，重置显示的省市区
      this.show_province = true
      this.show_city = false
      this.show_area = false
      // 一次选择完成后，重置地址存放数组
      this.addr_Arr = []
    },

    backUpper (type) {
      // 每一次反级都要删除数组最后一个元素，然后再根据type，判断显示的省市区
      this.addr_Arr.pop()
      if (type === 'city') {
        this.show_province = true
        this.show_city = false
        this.show_area = false
      }
      if (type === 'area') {
        this.show_province = false
        this.show_city = true
        this.show_area = false
      }
    },

    // 地址选择完毕，去发布事件，供父组件订阅
    publishEvent () {
      this.$emit('addr-change', this.addr_Str)
    }
  }
}
</script>

<style lang="scss" scoped>
.addr_keyboard{
  width: 100%;
  width: auto;
  padding: 1.5vw 2.66vw;
  background-color: #eaf1f9;

  .back{
    width: 100%;
    height: auto;
    padding-bottom: 1.3vw;
    font-size: 4.26vw;
    color: #f08800;
    display: flex;
    justify-content: flex-end;

    span{
      padding-left: 5vw;
      background: url(../../static/images/fallback.png) no-repeat left bottom;
      background-size: 4.5vw 5vw;
    }
  }

  .addr_province_box{
    width: 100%;
    height: auto;
    padding-left: 1%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    button{
      width: 24%;
      height: 8vw;
      font-size: 4vw;
      color: #333333;
      background-color: #ffffff;
      margin-right: 1%;
      margin-bottom: 1vw;
      box-shadow: none;
      box-shadow: 1px 1px 1px 1px #b2b2b2;
      border-radius: 0;
      box-sizing: border-box;
      padding: 0 2px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
}
</style>

json地址文件数据：该数据根据需求自己去更改。
数据太多了，这里只粘贴一部分....

{
  "province": [
    {"id": "110000", "name": "北京", "parentId": "0"},
    {"id": "120000", "name": "天津", "parentId": "0"},
    {"id": "130000", "name": "上海", "parentId": "0"},
    {"id": "140000", "name": "重庆", "parentId": "0"},
    {"id": "150000", "name": "河北", "parentId": "0"},
    {"id": "160000", "name": "河南", "parentId": "0"},
    {"id": "170000", "name": "上东", "parentId": "0"},
    {"id": "180000", "name": "山西", "parentId": "0"},
    {"id": "190000", "name": "陕西", "parentId": "0"},
    {"id": "200000", "name": "安徽", "parentId": "0"},
    {"id": "210000", "name": "江苏", "parentId": "0"},
    {"id": "220000", "name": "浙江", "parentId": "0"},
    {"id": "230000", "name": "湖北", "parentId": "0"},
    {"id": "240000", "name": "湖南", "parentId": "0"},
    {"id": "250000", "name": "江西", "parentId": "0"},
    {"id": "260000", "name": "福建", "parentId": "0"},
    {"id": "270000", "name": "广东", "parentId": "0"},
    {"id": "280000", "name": "广西", "parentId": "0"},
    {"id": "290000", "name": "辽宁", "parentId": "0"},
    {"id": "300000", "name": "吉林", "parentId": "0"},
    {"id": "310000", "name": "云南", "parentId": "0"},
    {"id": "320000", "name": "贵州", "parentId": "0"},
    {"id": "330000", "name": "四川", "parentId": "0"},
    {"id": "340000", "name": "海南", "parentId": "0"},
    {"id": "350000", "name": "哈尔滨", "parentId": "0"},
    {"id": "360000", "name": "青海", "parentId": "0"},
    {"id": "370000", "name": "海南", "parentId": "0"},
    {"id": "380000", "name": "西藏", "parentId": "0"},
    {"id": "390000", "name": "内蒙古", "parentId": "0"},
    {"id": "400000", "name": "甘肃", "parentId": "0"},
    {"id": "410000", "name": "宁夏", "parentId": "0"}
  ],

  "city": [
    {"id": "110001", "name": "北京市", "parentId": "110000"},
    {"id": "110002", "name": "天津市", "parentId": "120000"},
    {"id": "110003", "name": "上海市", "parentId": "130000"},
    {"id": "110004", "name": "重庆市", "parentId": "140000"},

    {"id": "110005", "name": "石家庄", "parentId": "150000"},
    {"id": "110006", "name": "唐山", "parentId": "150000"},
    {"id": "110007", "name": "秦皇岛", "parentId": "150000"},
    {"id": "110008", "name": "邯郸", "parentId": "150000"},

    {"id": "110016", "name": "郑州", "parentId": "160000"},
    {"id": "110018", "name": "洛阳", "parentId": "160000"}
  ],

  "area": [
    {"name": "东城区", "parentId": "110001"},
    {"name": "西城区", "parentId": "110001"},
    {"name": "朝阳区", "parentId": "110001"},

    {"name": "和平", "parentId": "110002"},
    {"name": "河东", "parentId": "110002"},
    {"name": "河西", "parentId": "110002"},

    {"name": "黄埔", "parentId": "110003"},
    {"name": "徐汇", "parentId": "110003"},

    {"name": "万州", "parentId": "110004"},
    {"name": "涪陵", "parentId": "110004"},
    {"name": "渝中", "parentId": "110004"},
    {"name": "大渡口", "parentId": "110004"},

    {"name": "长安", "parentId": "110005"},
    {"name": "桥西", "parentId": "110005"},
    {"name": "新华", "parentId": "110005"},
    {"name": "井陉矿", "parentId": "110005"},
    {"name": "裕华", "parentId": "110005"},
    {"name": "藁城", "parentId": "110005"},
    {"name": "鹿泉", "parentId": "110005"},
    {"name": "栾城", "parentId": "110005"},
    {"name": "井陉", "parentId": "110005"},
    {"name": "正定", "parentId": "110005"},
    {"name": "行唐", "parentId": "110005"},
    {"name": "灵寿", "parentId": "110005"},

    {"name": "路南", "parentId": "110006"},
    {"name": "路北", "parentId": "110006"}
  ]
}

父组件引用地址选择组件

<template>
  <div class="write">
    <div class="row">
      <label class="row-label" @click="addrPopupVisible('startAddr')">
        <span>起运地</span>
        <input type="text" placeholder="请选择起运地" v-model="startAddress" disabled="true"/>
      </label>
    </div>

    <div class="row">
      <label class="row-label" @click="addrPopupVisible('endAddr')">
        <span>目的地</span>
        <input type="text" placeholder="请选择目的地" v-model="endAddress" disabled="true"/>
      </label>
    </div>

   <mt-popup style="width:100vw;" v-model="popupVisibleAddress" position="bottom" :closeOnClickModal="false">
      <AddrSelect @addr-change="addressChange"></AddrSelect>
    </mt-popup>
  </div>
</template>

<script>
import AddrSelect from '@/components/AddrSelect'
export default {
  components: {
    AddrSelect
  },
  data () {
    return {
      popupVisibleAddress: false,
      popupVisibleAddrType: '',

      startAddress: '',
      endAddress: ''
    }，
    methods: {
      addrPopupVisible (addrType) {
        this.popupVisibleAddrType = addrType
        this.popupVisibleAddress = true
      },
      addressChange (addrStr) {
        this.popupVisibleAddress = false
        if (this.popupVisibleAddrType === 'startAddr') this.insurInformation.startAddress = addrStr
        if (this.popupVisibleAddrType === 'endAddr') this.insurInformation.endAddress = addrStr
      },
     }
}

vueApp+mint-ui自定义地址选择(二)

主要代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读