详解vantUI框架在vue项目中的应用踩坑
发布在前端全栈2019年1月24日view:67web跨域KaylynnHTTPS网站安全CentOS369CloudDOMHTMLCarlinda
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

评论
发表评论
暂无评论
PUBLISHED IN
前端全栈

不定时推送有价值,干货的前端文章

我的收藏