詳解vantUI框架在vue項目中的應用踩坑

1.訂單提交地址等組件的應用。

使用的組件有如下：

import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant'

主要是配貨地址編輯這塊；

<van-address-edit
          :area-list="areaList"
          :address-info="addressInfo"
          show-postal
          show-delete
          show-set-default
          show-search-result
           
          @save="onSave"
          @delete="onDelete"
          @change-detail="onChangeDetail"
         />

地址編輯。沒有用默認的地址編輯屬性：search-result

search-result | 詳細地址搜索結果

所以去掉了，一是沒有做地理搜索功能。而且發現模擬測試老是有bug，乾脆去掉。

2.默認list屬性。要重新定義。配合自己需要做的功能。文檔給的屬性很少

list:[
    { id: '1',
     name: '張三',
     tel: '13000000000',
     province:'江蘇',
     city:'無錫',
     county:'崇安區',
     area_code:'120000',
     address: '浙江省杭州市西湖區文三路 138 號東方通信大廈 7 樓 501 室',
     postal_code:'123456',
    }
   ],

原來的

{
     id: '1',
     name: '張三',
     tel: '13000000000',
     address: '浙江省杭州市西湖區文三路 138 號東方通信大廈 7 樓 501 室'
    },

，後添加詳細的數據，是爲了方便後期做更改編輯功能。

3.地址json文件。

默認要導入全國地址表，

// 導入 area.js
import areaList from '../../../config/area.min.js'

直接在函數。將數據綁定給了模型 areaList

:area-list="areaList"

4.保存地址：

默認數據類型對象。所以定義了一個addr。否則老是報錯。但不影響程序運行。

addr重新組合了拿到的數據。壓入list裏去渲染，這裏做了下判斷是否保存數據成功

let addr = new Object;
  console.log('content');
  console.log(content);
  let len = this.list.length + 1;
  addr = {
   id:len,
   name:content.name,
   tel:content.tel,
   city:content.city,
   county:content.county,
   is_default:content.is_default,
   postal_code:content.postal_code,
   province:content.province,
   area_code:content.area_code,
   address:content.province+content.city+content.county+content.address_detail
  };
  let is_add = this.list.push(addr);

5，編輯的時候。 onEdit(item, index) 這個item就是我最先更改的list數據模型了。這裏有需要的地區code碼。這就是想要的。

因爲跳到編輯頁面，需要將地區重新解析出來。測試時可以。

其中待完善：編輯時候的詳細地址未變化。刪除地址等操作

下方。測試代碼demo

<template>
 <div class="home-page">
  <div class="home">
   <!-- top 高度固定6vh; -->
   <header-vue></header-vue>
   <!-- 內容滾動 -->
   <div class="home-content wrapper" ref="wrapper"> 
     <div class="content">
      <div style="min-height:900px; border:1px solid red;">
        進入訂單頁面顯示訂單列表。開始編輯地址收貨表。如果之前有，查詢出來，直接選擇上。沒有用戶開始去編輯
       
        <!-- 新增收貨地址：vant - AddressList -->
        <van-address-list
         v-model="chosenAddressId"
         :list="list"
         @add="onAdd"
         @edit="onEdit"
        />
        <!-- 彈出層，提示選擇地址，沒有則編輯 -->
  
        <van-popup v-model="show1" position="" :overlay="false">
         <van-button @click="show1 = false">關閉</van-button>
         <!-- 地址組件 -->
          <!-- <div style="width:100vw;height:100vh;background:#fff;">地址編輯內容</div> -->
          <van-address-edit
           :area-list="areaList"
           :columns-num="2"
           :address-info="addressInfo"
           show-postal
           show-delete
           show-set-default
           show-search-result
            
           @save="onSave"
           @delete="onDelete"
           @change-detail="onChangeDetail"
          />
        </van-popup>
        <!-- vatn - card -->
        <van-card
         title="標題"
         desc="描述"
         num="2"
         price="2.00"
         :thumb="imageURL"
        >
         <div slot="footer">
          <van-button size="mini">按鈕</van-button>
          <van-button size="mini">按鈕</van-button>
         </div>
        </van-card>
  
      </div>
  
     </div>
   </div>
  
  </div>
 </div>
</template>
  
<script>
import BScroll from 'better-scroll'
import HeaderVue from '../../components/common/header/Header.vue'
// 導入 area.js
import areaList from '../../../config/area.min.js'
  
import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant'
  
export default {
 name: '',
 components:{ 
  HeaderVue,
  [Card.name]:Card,
  [button.name]:button,
  [Toast.name]:Toast,
  [AddressList.name]:AddressList,
  [Popup.name]:Popup,
  [AddressEdit .name]:AddressEdit,
  [Area.name]:Area,
 },
 data () {
  return {
   msg: 'Welcome to Home.vue App sss',
   chosenAddressId:'1',
   show:false,
   show1:false,
   areaList:'',
   searchResult:[
    { id: '1',
     name: '張三',
     tel: '13000000000',
     address: '浙江省杭州市西湖區文三路 138 號東方通信大廈 7 樓 501 室'
    }
   ],
   addressInfo:'',
   imageURL:'kdkk',
   list:[
    { id: '1',
     name: '張三',
     tel: '13000000000',
     province:'江蘇',
     city:'無錫',
     county:'崇安區',
     area_code:'120000',
     address: '浙江省杭州市西湖區文三路 138 號東方通信大廈 7 樓 501 室',
     postal_code:'123456',
    }
   ],
  }
 },
 mounted(){
  // 初始化滾動插件 better-scroll
  this.scroll = new BScroll(this.$refs.wrapper,{
    scrollY:true,
    click:true,//一開始的點擊事件被bscroll阻止了，設置這個才能點擊
  })
  
  this.getOrderDate()
 },
 methods:{
  getOrderDate:function(){
   console.log('獲取 該用戶名下的訂單表數據')
  },
  onAdd() {
   console.log('新增收貨地址');
   this.show1 = true;
   console.log('areaList')
   console.log(areaList)
   this.areaList = areaList;
   // 地址編輯默認信息
   this.addressInfo = new Object;
  },
  onEdit(item, index) {
   let addressInfo = new Object;
   this.areaList = areaList;
   // Toast('編輯收貨地址:' + index);
   console.log('編輯收貨地址:' + index);
   console.log(item);
   // 進入編輯模式
   this.show1 = true;
   addressInfo = {
    id:item.id,
    name:item.name,
    tel:item.tel,
    province:item.province,
    city:item.city,
    county:item.county,
    area_code:item.area_code,
    address_detail:item.address,
    postal_code:item.postal_code,
    is_default:item.is_default,
   }
  
   this.addressInfo = addressInfo;
  },
  onSave(content) {
   let addr = new Object;
   console.log('content');
   console.log(content);
   let len = this.list.length + 1;
   addr = {
    id:len,
    name:content.name,
    tel:content.tel,
    city:content.city,
    county:content.county,
    is_default:content.is_default,
    postal_code:content.postal_code,
    province:content.province,
    area_code:content.area_code,
    address:content.province+content.city+content.county+content.address_detail
   };
   let is_add = this.list.push(addr);
   // 判斷是否選中默認
   if (content.is_default) {
    this.chosenAddressId = len;
   }
   if (is_add) {
    this.show1 = false;
   }
   console.log(this.list);
   // this.list = listArr;
   // this.list = [{
   //   id: '1',
   //   name: '張三',
   //   tel: '13000000000',
   //   address: '浙江省杭州市西湖區文三路 138 號東方通信大廈 7 樓 501 室'
   // }];
  },
  onDelete() {
   Toast('delete');
   console.log('delete');
  },
  onChangeDetail(val) {
    // if (val) {
    //  this.searchResult = [{
    //   name: '黃龍萬科中心',
    //   address: '杭州市西湖區'
    //  }];
    // }else {
    //   this.searchResult = [];
    // }
  }
   
 },
}
</script>
  
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
 .home-page{}
 .home{
  width: 100%;
  
 }
 .header{
  width: 100%;
  height: 6vh;
  border-bottom: 1px solid #ddd;
 }
 .home-content{
  height: 94vh;
  border: 1px solid #000;
  overflow: hidden;
 }
  
 /*彈出層*/
 .van-popup{
 /* width: 100%;
  top: 40%!important;*/
 }
 .van-address-list__add{
  position: relative!important;
  z-index: 1999;
  font-size: 14px;
 }
 .van-cell{
  position: relative!important;
 }
 .van-popup{
  height: 100%;
  width: 100%;
 }
 .van-address-list__group{
 padding-bottom: 10px!important;
 }
  
</style>

最後

爲了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成爲全棧工程師，乃至架構師的路上披荊斬棘。在這裏給大家推薦一個前端全棧學習交流圈：866109386.歡迎大家進羣交流討論，學習交流，共同進步。

當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有有效資源還是很有必要的。

最後祝福所有遇到瓶疾且不知道怎麼辦的前端程序員們，祝福大家在往後的工作與面試中一切順利。