详解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 相关文章推荐
一次失败的jQuery优化尝试小结
Feb 06 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
leaflet的开发入门教程
Nov 17 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
vue通过过滤器实现数据格式化
Jul 20 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
PHP开发框架总结收藏
2008/04/24 PHP
PHP 文件类型判断代码
2009/03/13 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
完善的jquery处理机制
2016/02/21 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
Python写的一个简单监控系统
2015/06/19 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
python dlib人脸识别代码实例
2019/04/04 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
用python绘制樱花树
2020/10/09 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
前台接待的工作职责
2013/11/21 职场文书
英文简历自荐信范文
2013/12/11 职场文书
机械个人求职信范文
2014/01/24 职场文书
职业女性的职业规划
2014/03/04 职场文书
经济担保书范文
2014/04/02 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
组织鉴定材料
2014/06/02 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
MySQL多表查询机制
2022/03/17 MySQL
Go 内联优化让程序员爱不释手
2022/06/21 Golang