详解vantUI框架在vue项目中的应用踩坑


Posted in Javascript onDecember 06, 2018

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
vuex实现简易计数器
Oct 27 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
JavaScript手写数组的常用函数总结
Nov 22 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 #Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 #Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 #Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 #Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 #Javascript
微信小程序实现图片滚动效果示例
Dec 05 #Javascript
详解vue中的computed的this指向问题
Dec 05 #Javascript
You might like
简单采集了yahoo的一些数据
2007/02/14 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
javascript入门·对象属性方法大总结
2007/10/01 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
全面了解js中的script标签
2016/07/04 Javascript
简述vue中的config配置
2018/01/23 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
python中的字符串内部换行方法
2018/07/19 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
财务人员的自我评价范文
2014/03/03 职场文书
护士节活动总结
2014/08/29 职场文书
销售人才自我评价范文
2014/09/27 职场文书
新闻人物通讯稿
2014/10/09 职场文书
申报材料格式
2014/12/30 职场文书
西安大雁塔导游词
2015/02/10 职场文书
python实现过滤敏感词
2021/05/08 Python
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python