详解vantUI框架在vue项目中的应用踩坑
1.订单提交地址等组件的应用。
使用的组件有如下:
import{Card,button,Toast,AddressList,Popup,AddressEdit,Area}from'vant'
主要是配货地址编辑这块;
地址编辑。没有用默认的地址编辑属性: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 importareaListfrom'../../../config/area.min.js'
直接在函数。将数据绑定给了模型areaList
:area-list="areaList"
4.保存地址:
默认数据类型对象。所以定义了一个addr。否则老是报错。但不影响程序运行。
addr重新组合了拿到的数据。压入list里去渲染,这里做了下判断是否保存数据成功
letaddr=newObject; console.log('content'); console.log(content); letlen=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 }; letis_add=this.list.push(addr);
5,编辑的时候。 onEdit(item,index)这个item就是我最先更改的list数据模型了。这里有需要的地区code码。这就是想要的。
因为跳到编辑页面,需要将地区重新解析出来。测试时可以。
其中待完善:编辑时候的详细地址未变化。删除地址等操作
下方。测试代码demo
进入订单页面显示订单列表。开始编辑地址收货表。如果之前有,查询出来,直接选择上。没有用户开始去编辑 关闭 按钮 按钮