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

本文链接：https://blog.csdn.net/q3254421/article/details/86627527

本文详细介绍了 vantUI 框架在 Vue 项目中的使用，包括订单提交地址组件的定制，如地址编辑、list 属性的重新定义、全国地址数据的导入与绑定。在实践中遇到了搜索结果的移除、数据类型的调整等问题，并提供了保存和编辑地址的解决方案。然而，编辑时详细地址不变及删除操作等功能仍有待完善。同时，分享了一处前端全栈学习资源，助力开发者提升技能。

摘要由CSDN通过智能技术生成

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;
  a