詳解vantUI框架在vue項(xiàng)目中的應(yīng)用踩坑

更新時(shí)間：2018年12月06日 08:31:33 作者：milli236

這篇文章主要介紹了詳解vantUI框架在vue項(xiàng)目中的應(yīng)用踩坑,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

1.訂單提交地址等組件的應(yīng)用。

使用的組件有如下：

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"
          />

地址編輯。沒有用默認(rèn)的地址編輯屬性：search-result

search-result

詳細(xì)地址搜索結(jié)果

所以去掉了，一是沒有做地理搜索功能。而且發(fā)現(xiàn)模擬測(cè)試?yán)鲜怯衎ug，干脆去掉。

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

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

原來的

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

，后添加詳細(xì)的數(shù)據(jù)，是為了方便后期做更改編輯功能。

3.地址json文件。

默認(rèn)要導(dǎo)入全國地址表，

// 導(dǎo)入 area.js
import areaList from '../../../config/area.min.js'

直接在函數(shù)。將數(shù)據(jù)綁定給了模型 areaList

 :area-list="areaList"

4.保存地址：

默認(rèn)數(shù)據(jù)類型對(duì)象。所以定義了一個(gè)addr。否則老是報(bào)錯(cuò)。但不影響程序運(yùn)行。

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

 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，編輯的時(shí)候。 onEdit(item, index) 這個(gè)item就是我最先更改的list數(shù)據(jù)模型了。這里有需要的地區(qū)code碼。這就是想要的。

因?yàn)樘骄庉嬳撁?，需要將地區(qū)重新解析出來。測(cè)試時(shí)可以。

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

下方。測(cè)試代碼demo

<template>
 <div class="home-page">
  <div class="home">
   <!-- top 高度固定6vh; -->
   <header-vue></header-vue>
   <!-- 內(nèi)容滾動(dòng) -->
   <div class="home-content wrapper" ref="wrapper"> 
     <div class="content">
      <div style="min-height:900px; border:1px solid red;">
        進(jìn)入訂單頁面顯示訂單列表。開始編輯地址收貨表。如果之前有，查詢出來，直接選擇上。沒有用戶開始去編輯
      
        <!-- 新增收貨地址：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">關(guān)閉</van-button>
         <!-- 地址組件 -->
          <!-- <div style="width:100vw;height:100vh;background:#fff;">地址編輯內(nèi)容</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="標(biāo)題"
         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'
// 導(dǎo)入 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: '浙江省杭州市西湖區(qū)文三路 138 號(hào)東方通信大廈 7 樓 501 室'
    }
   ],
   addressInfo:'',
   imageURL:'kdkk',
   list:[
    { id: '1',
     name: '張三',
     tel: '13000000000',
     province:'江蘇',
     city:'無錫',
     county:'崇安區(qū)',
     area_code:'120000',
     address: '浙江省杭州市西湖區(qū)文三路 138 號(hào)東方通信大廈 7 樓 501 室',
     postal_code:'123456',
    }
   ],
  }
 },
 mounted(){
  // 初始化滾動(dòng)插件 better-scroll
  this.scroll = new BScroll(this.$refs.wrapper,{
    scrollY:true,
    click:true,//一開始的點(diǎn)擊事件被bscroll阻止了，設(shè)置這個(gè)才能點(diǎn)擊
  })
 
  this.getOrderDate()
 },
 methods:{
  getOrderDate:function(){
   console.log('獲取 該用戶名下的訂單表數(shù)據(jù)')
  },
  onAdd() {
   console.log('新增收貨地址');
   this.show1 = true;
   console.log('areaList')
   console.log(areaList)
   this.areaList = areaList;
   // 地址編輯默認(rèn)信息
   this.addressInfo = new Object;
  },
  onEdit(item, index) {
   let addressInfo = new Object;
   this.areaList = areaList;
   // Toast('編輯收貨地址:' + index);
   console.log('編輯收貨地址:' + index);
   console.log(item);
   // 進(jìn)入編輯模式
   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);
   // 判斷是否選中默認(rèn)
   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: '浙江省杭州市西湖區(qū)文三路 138 號(hào)東方通信大廈 7 樓 501 室'
   // }];
  },
  onDelete() {
   Toast('delete');
   console.log('delete');
  },
  onChangeDetail(val) {
    // if (val) {
    //  this.searchResult = [{
    //   name: '黃龍萬科中心',
    //   address: '杭州市西湖區(qū)'
    //  }];
    // }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>

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

您可能感興趣的文章: