How to implement three-level linkage using Vue2

This article mainly introduces in detail how Vue2 imitates Taobao to realize the three-level linkage of provinces and municipalities. It has certain reference value. Interested friends can refer to

Three-level linkage. With the More and more aesthetics are emerging, and many companies are imitating Taobao's three-level linkage, which is good-looking and fashionable, so our company is the same... In order to make it easier to post code, I separated the json of provinces and cities written in the data Come out, download and paste it to use, the link is as follows: vue.json (This is directly a data, just put it into your vue2 project. (Because my project uses vue2, so other attributes and blog content are It matches. Please cooperate with the blog to download this json)).

First the page displays as follows:

#Then there will be a three-level linkage in our county-level area, as follows: (The following is a fragment, the background color has not been intercepted)

What this picture looks like and what form it appears in depends on your company's UI needs. Our company makes it a pop-up layer. . Then the background color is transparent. In order to save traffic, I only intercepted a section. The final display is as follows:

If your company has the same needs as ours, I hope this can help you. . The following is the three-level linkage code and css style written in the vue2 project:

  <section class="myAddress">
    <section>
      <section class="cont" @click="choseAdd()">
       <section>
         <span>所在地区：{{Province?Province:&#39;&#39;}} {{City?City:&#39;&#39;}} {{District?District:&#39;&#39;}}</span>
       </section>
       <img src="/static/imghwm/default1.png"  data-src="../../assets/main/right.png"  class="lazy"   alt="">
       <p style="clear: both"></p>
      </section>
    </section>
    <!-- 居住地址三级联动选项 -->
    <section class="showChose" v-show="showChose">
     <section class="address">
      <section class="title">
       <h4 id="居住地址">居住地址</h4>
       <span @click="closeAdd()">×</span>
      </section>
      <section class="title">
       <p class="area" @click="provinceSelected()">
         {{Province?Province:info[province-1].name}}
       </p>
       <p class="area" @click="citySelected()" :class="City?&#39;&#39;:&#39;active&#39;">
         {{City?City:&#39;请选择&#39;}}
       </p>
       <p class="area" @click="districtSelected()" :class="District?&#39;&#39;:&#39;active&#39;" v-show="City">
         {{District?District:&#39;请选择&#39;}}
       </p>
      </section>
      <ul>
        <li class="addList" v-for="(v,k) in info" 
          @click="getProvinceId(v.id, v.name, k)" 
          v-show="showProvince" 
          :class="v.selected ? &#39;active&#39; : &#39;&#39;">{{v.name}}</li>
        <li class="addList" v-for="(v,k) in showCityList" 
          @click="getCityId(v.id, v.name, k)" 
          v-show="showCity" 
          :class="v.selected ? &#39;active&#39; : &#39;&#39;">{{v.name}}</li>
        <li class="addList" v-for="(v,k) in showDistrictList" 
          @click="getDistrictId(v.id, v.name, k)" 
          v-show="showDistrict" 
          :class="v.selected ? &#39;active&#39; : &#39;&#39;">{{v.name}}</li>
       </ul>
     </section>
    </section>
    <!-- 页面内容 -->
    <section class="cont">
      <span>详细地址：</span>
      <input type="text" v-model="address" placeholder=" 请填写详细地址">
    </section>
  </section>
</template>
<script>
  import {
      mapActions,
      mapGetters
  } from &#39;vuex&#39;;
  import api from &#39;./../../fetch/api.js&#39;
  export default {
    name: &#39;address&#39;,
    data(){},此处的data直接下载json复制进去即可。http://download.csdn.net/detail/zhaohaixin0418/9862255。
    components: {
      MineHeader
    },
    computed: {
        ...mapGetters([
          &#39;BCcontextPathSrc&#39;,
          &#39;sessionId&#39;,
          &#39;token&#39;,
        ]),
  },
  methods: {
    choseAdd: function() {
      this.showChose = true;
    },
    closeAdd: function() {
      this.showChose = false;
    },
    _filter(add, name, code) {
      let result = [];
      for (let i = 0; i < add.length; i++) {
        if (code == add[i].id) {
          result = add[i][name];
        }
      }
      return result;
    },
    getProvinceId: function(code, input, index) {
      this.province = code;
      this.Province = input;
      this.showProvince = false;
      this.showCity = true;
      this.showDistrict = false;
      this.showCityList = this._filter(this.info, &#39;city&#39;, this.province);
      // 点击选择当前
      this.info.map(a => a.selected = false);
      this.info[index].selected = true;
      this.areaProvince = input;
    },
    provinceSelected: function() {
      // 清除市级和区级列表
      this.showCityList = false;
      this.showDistrictList = false;
      // 清除市级和区级选项
      this.City = false;
      this.District = false;
      // 选项页面的切换
      this.showProvince = true;
      this.showCity = false;
      this.showDistrict = false;
    },
    getCityId: function(code, input, index) {
      this.city = code;
      this.City = input;
      this.showProvince = false;
      this.showCity = false;
      this.showDistrict = true;
      this.showDistrictList = this._filter(this.showCityList, &#39;district&#39;, this.city);
      // 选择当前添加active
      this.showCityList.map(a => a.selected = false);
      this.showCityList[index].selected = true;
      this.areaCity = input;
    },
    citySelected: function() {
      this.showProvince = false;
      this.showCity = true;
      this.showDistrict = false;
    },
    getDistrictId: function(code, input, index) {
      this.district = code;
      this.District = input;
      // 选择当前添加active
      this.showDistrictList.map(a => a.selected = false);
      this.showDistrictList[index].selected = true;
      // 选取市区选项之后关闭弹层
      this.showChose = false;
      this.areaDistrict = input;
    },
    districtSelected: function() {
      this.showProvince = false;
      this.showCity = false;
      this.showDistrict = true;
    },
    saveProfile: function() {
      api.commonApi(&#39;后台接口&#39;, 这里是贵公司后台接口，按照你们公司的改了就好
          &#39;param_key={"head":{"TYPE":"ADD_UPD_INFO",&#39; +
          &#39;"SESSION_ID":"&#39; + this.sessionId + &#39;",&#39; +
          &#39;"TOKEN":"&#39; + this.token + &#39;","DEVICE_ID":""},&#39; +
          &#39;"param":{"PROVINCE":"&#39; + this.areaProvince + &#39;", &#39; +
          &#39;"CITY":"&#39; + this.areaCity + &#39;", "COUNTY":"&#39; + this.areaDistrict + &#39;",&#39; +
          &#39;"ADDRESS": "&#39; + this.address + &#39;"}}&#39;)
          .then(res => {
        console.log(res.data);
    });
    }
  }
  }
</script>
<style scoped>
  .myAddress {
    width: 100%;
    background-color: white;
    border-top: 4px solid rgba(245, 245, 245, 1);
    color: #333;
  }
  .myAddress .cont {
    border-bottom: 1px solid rgba(245, 245, 245, 0.8);
  }
  .myAddress .cont span {
    display: inline-block;
    font-size: 0.28rem;
    color: #333;
    line-height: 0.88rem;
    margin-left: 0.32rem;
  }
  .myAddress .cont section {
    float: left;
  }
  .myAddress .cont img {
    float: right;
    width: 0.14rem;
    height: 0.24rem;
    margin: 0.32rem 0.32rem 0.32rem 0;
  }
  .showChose {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 120;
    background: rgba(77, 82, 113, 0.8);
  }
  .address {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 121;
    background: #fff;
    width: 100%;
  }
  .title h4 {
    display: inline-block;
    margin-left: 3.2rem;
    font-size: 0.32rem;
    line-height: 0.88rem;
    font-weight: normal;
    color: #999;
  }
  .title span {
    margin: 0.42rem 0 0 2.2rem;
    font-size: 0.45rem;
    line-height: 0.34rem;
    color: #D8D8D8;
  }
  .area {
    display: inline-block;
    font-size: 0.24rem;
    line-height: 0.88rem;
    margin-left: 0.42rem;
    color: #333;
  }
  .addList {
    padding-left: 0.32rem;
    font-size: 0.34rem;
    line-height: 0.88rem;
    color: #333;
  }
  /* 修改的格式 */
  .address ul {
    height: 100%;
    margin-left: 5%;
    max-height: 4.4rem;
    overflow: auto;
  }
  .address .title .active {
    color: #0071B8;
    border-bottom: 0.02rem solid #0071B8;
  }
  .address ul .active {
    color: #0071B8;
  }
</style>

This completes the three-level linkage of a province and city.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed introduction to the usage of this object in js

##How to achieve the preview effect in JS

Use three.js to create a project

The above is the detailed content of How to implement three-level linkage using Vue2. For more information, please follow other related articles on the PHP Chinese website!