Vue自定義省市區三級聯動

<template>
  <div class="percentloop">
     <!-- 地區選擇 -->
      <section class="section">
        <p class="tittle">
          <span class="important_font">*</span>
          <span>地區篩選</span>
        </p>
 
        <div class="box">
          <div class="area">
            <!-- 省 -->
            <li class="area-menu province-list">
              <div class="area-msg" @click.stop="show(0)">
                {{areaList[province].provinceName}}
              </div>
              <ul v-show="showindex[0]">
                <li v-for="(item,index) in areaList" :key="index"
                  @click.stop="selprovinceName(index,item.provinceName)">
                  {{item.provinceName}}
                </li>
              </ul>
            </li>
            <span class="text">省</span>
 
            <!-- 市 -->
            <li class="area-menu city-list">
              <div class="area-msg" @click.stop="show(1)">
                {{areaList[province].areaVOList[cityIndex].cityName}}
              </div>
              <ul v-show="showindex[1]">
                <li v-for="(item,index) in areaList[province].areaVOList" :key="index"
                  @click.stop="selcityName(index,item.cityName)">
                  {{item.cityName}}
                </li>
              </ul>
            </li>
            <span class="text">市</span>
 
            <!-- 區 -->
            <li class="area-menu region-list">
              <div class="area-msg" @click.stop="show(2)">
                {{areaList[province].areaVOList[cityIndex].areaVOList[countyIndex].countyName}}
              </div>
              <ul v-show="showindex[2]" style="right:-40px;">
                <li v-for="(item,index) in areaList[province].areaVOList[cityIndex].areaVOList" :key="index"
                  @click.stop="selcountyName(index,item.countyName)">
                  {{item.countyName}}</li>
              </ul>
            </li>
 
            <span class="text">區/縣</span>
          </div>
        </div>
      </section>
 
 
  </div>
</template>
 
<script>
  let data = {
    areaList: [], //省市區三級聯動的資料
        InitializeList: [], //我寫得聯動資料
 
        showindex: [false, false, false], //控制省市區彈框顯示
 
        province: 0, //預設省下標
        cityIndex: 0, //預設市下標
        countyIndex: 0, //預設區下標
 
        istoubi: false,
        selectType: 0, //預設廣告型別索引   全部
        attr1Index: -1, //預設廣告位置型別索引   
        attr2Index: -1, //預設裝置型別索引    
 
        //傳送給後臺的值
        address_str: ['全部', '全部', '全部'], //地址
 
        select_parmas: {
          county: '全部,全部,全部', //省市區
          selectTypeID: -1, //選擇的廣告型別id
          selectAttr1ID: -1, //選擇的廣告位置id
          selectAttr2ID: -1, //選擇的裝置型別id
        }
  }
 
  $('html').click(function (e) {
    data.showindex = [false, false, false]
  })
 
  import Area from '../../static/json/area.json'
 
  export default {
    data() {
      return data
    },
    created() {
      console.log(this.area)
      this.areaList = this.area[0];
 
      // console.log(Area)
      // this.areaList = Area[0];
    },
 
    methods: {
 
     //顯示下拉框
      show(index) {
        let arr = [...this.showindex];
        //彈框顯示時 直接全部隱藏
        if (arr[index] == true) {
          arr = [false, false, false]
        } else {
          arr = [false, false, false] //初始化全部隱藏
          arr[index] = true
        }
 
        this.showindex = arr;
      },
 
      //省的點選事件
      selprovinceName(index, value) {
        this.showindex = [false, false, false]
 
        this.province = index;
        this.cityIndex = 0; //預設市下標
        this.countyIndex = 0; //預設區下標
 
        let address = [...this.address_str]
        address[0] = value;
        this.address_str = address;
 
      },
 
      //市的點選事件
      selcityName(index, value) {
        this.showindex = [false, false, false]
        this.cityIndex = index;
        this.countyIndex = 0; //預設區下標
 
        let address = [...this.address_str]
        address[1] = value;
        this.address_str = address;
      },
 
      //區的點選事件
      selcountyName(index, value) {
        this.showindex = [false, false, false]
        this.countyIndex = index;
 
        let address = [...this.address_str]
        address[2] = value;
        this.address_str = address;
      },
 
    },
 
  }
 
</script>
 
<style scoped lang="scss">
  @import "../common/common";
  .section {
      box-sizing: border-box;
      margin-bottom: 0.38rem;
 
      .tittle {
        margin-bottom: 0.2rem;
      }
 
      .box {
        .labelspan {
          margin-right: 0.18rem;
          margin-bottom: 0.19rem;
          box-sizing: border-box;
        }
 
        //視訊時長
        .longvalue {
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          margin-bottom: 0.1rem;
 
          .time_box {
            width: 1.6rem;
            height: 0.56rem;
            line-height: 0.56rem;
            border: 1px solid rgba(230, 230, 230, 1);
            border-radius: 0.1rem;
            padding-left: 0.38rem;
            margin: 0 0.17rem;
 
          }
        }
 
 
        //選擇投放時間
        .slect {
          width: 100%;
          line-height: 0.56rem;
          border: 1px solid rgba(230, 230, 230, 1);
          border-radius: 0.1rem;
          padding-left: 0.2rem;
          color: #4984EB;
        }
 
        //選擇時間段
        .slect_time {
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
 
          .middle {
            margin: 0 0.24rem;
            line-height: 0.56rem;
          }
 
          .time_box {
            width: 1.6rem;
            height: 0.56rem;
            line-height: 0.56rem;
            border: 1px solid rgba(230, 230, 230, 1);
            border-radius: 0.1rem;
            padding-left: 0.38rem;
          }
        }
 
 
      }
 
      .tip {
        //   margin-top: 
      }
    }
 
 
      .area {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
 
    .text {
      margin: 0 0.15rem;
    }
 
    .area-menu {
      position: relative;
      display: inline-block;
 
      .area-msg {
        width: 1.5rem;
        height: 0.56rem;
        line-height: 0.56rem;
        background-color: #fff;
        border: 1px solid #dcdcdc;
        border-radius: 0.1rem;
        text-align: center;
        overflow: hidden;
      }
 
      ul {
        position: absolute;
        top: 0.57rem;
        width: 160px;
        height: auto;
        max-height: 180px;
        font-size: 14px;
        overflow-y: scroll;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
 
        li {
          text-align: center;
          height: 30px;
          line-height: 30px;
        }
      }
    }
  }
 
</style>