快捷導(dǎo)航

Vue2仿淘寶實現(xiàn)省市區(qū)三級聯(lián)動

更新時間：2020年04月15日 14:31:52 作者：趙海辛

這篇文章主要為大家詳細(xì)介紹了Vue2仿淘寶實現(xiàn)省市區(qū)三級聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

三級聯(lián)動，隨著越來越多的審美，出現(xiàn)了很多種，好多公司都仿著淘寶的三級聯(lián)動，好看時尚，so我們公司也一樣……為了貼代碼方便，我把寫在data里面省市區(qū)的json獨立了出來，下載貼進(jìn)去即可用，鏈接如下：vue.json(這個直接是個data，放入你的vue2項目中即可。（因為我的項目是用的vue2，所以，其他的屬性跟博客內(nèi)容是吻合的。請配合博客再下載此json）)。

首先頁面顯示如下：

然后我們縣級所在地區(qū)會出現(xiàn)三級聯(lián)動，如下：（以下是片段，背景色未截取）

這個張什么樣，以什么形式出現(xiàn)，取決于貴公司的UI需求，我們公司是做成彈出層了。。然后背景色透明，這里為了節(jié)省流量，我只截取了一段，最后顯示如下：

如果貴公司也跟我們需求一樣，希望這個可以幫到你們。下面是在vue2項目中寫的三級聯(lián)動代碼以及css樣式：
<template>

 <section class="myAddress">
  <section>
   <section class="cont" @click="choseAdd()">
    <section>
     <span>所在地區(qū)：{{Province?Province:''}} {{City?City:''}} {{District?District:''}}</span>
    </section>
    <img src="../../assets/main/right.png" alt="">
    <div style="clear: both"></div>
   </section>
  </section>
  <!-- 居住地址三級聯(lián)動選項 -->
  <section class="showChose" v-show="showChose">
   <section class="address">
   <section class="title">
    <h4>居住地址</h4>
    <span @click="closeAdd()">×</span>
   </section>
   <section class="title">
    <div class="area" @click="provinceSelected()">
     {{Province?Province:info[province-1].name}}
    </div>
    <div class="area" @click="citySelected()" :class="City?'':'active'">
     {{City?City:'請選擇'}}
    </div>
    <div class="area" @click="districtSelected()" :class="District?'':'active'" v-show="City">
     {{District?District:'請選擇'}}
    </div>
   </section>
   <ul>
    <li class="addList" v-for="(v,k) in info" 
     @click="getProvinceId(v.id, v.name, k)" 
     v-show="showProvince" 
     :class="v.selected ? 'active' : ''">{{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 ? 'active' : ''">{{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 ? 'active' : ''">{{v.name}}</li>
    </ul>
   </section>
  </section>
  <!-- 頁面內(nèi)容 -->
  <section class="cont">
   <span>詳細(xì)地址：</span>
   <input type="text" v-model="address" placeholder=" 請?zhí)顚懺敿?xì)地址">
  </section>
 </section>
</template>
<script>
 import {
   mapActions,
   mapGetters
 } from 'vuex';
 import api from './../../fetch/api.js'
 export default {
  name: 'address',
  data(){},此處的data直接下載json復(fù)制進(jìn)去即可。http://download.csdn.net/detail/zhaohaixin0418/9862255。
  components: {
   MineHeader
  },
  computed: {
    ...mapGetters([
     'BCcontextPathSrc',
     'sessionId',
     'token',
    ]),
 },
 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, 'city', this.province);
   // 點擊選擇當(dāng)前
   this.info.map(a => a.selected = false);
   this.info[index].selected = true;
   this.areaProvince = input;
  },
  provinceSelected: function() {
   // 清除市級和區(qū)級列表
   this.showCityList = false;
   this.showDistrictList = false;
   // 清除市級和區(qū)級選項
   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, 'district', this.city);
   // 選擇當(dāng)前添加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;
   // 選擇當(dāng)前添加active
   this.showDistrictList.map(a => a.selected = false);
   this.showDistrictList[index].selected = true;
   // 選取市區(qū)選項之后關(guān)閉彈層
   this.showChose = false;
   this.areaDistrict = input;
  },
  districtSelected: function() {
   this.showProvince = false;
   this.showCity = false;
   this.showDistrict = true;
  },
  saveProfile: function() {
   api.commonApi('后臺接口', 這里是貴公司后臺接口，按照你們公司的改了就好
     'param_key={"head":{"TYPE":"ADD_UPD_INFO",' +
     '"SESSION_ID":"' + this.sessionId + '",' +
     '"TOKEN":"' + this.token + '","DEVICE_ID":""},' +
     '"param":{"PROVINCE":"' + this.areaProvince + '", ' +
     '"CITY":"' + this.areaCity + '", "COUNTY":"' + this.areaDistrict + '",' +
     '"ADDRESS": "' + this.address + '"}}')
     .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>

這樣就完成了一個省市區(qū)的三級聯(lián)動。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: