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

细节未完善。参考地址编辑方面的应用。

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里去渲染,这里做了下判断是

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
要在Vue项目使用Element UI,你需要按照以下步骤进行操作: 1. 首先,在你的项目安装Element UI。你可以使用npm或者yarn来安装Element UI,命令如下: ``` npm install element-ui --save ``` 或者 ``` yarn add element-ui ``` 2. 在你的main.js文件引入Element UI,并注册它的组件。你可以使用以下代码: ``` import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 确保你的Vue实例使用了App组件,并将其挂载到一个HTML元素上。你可以使用以下代码: ``` new Vue({ render: h => h(App) }).$mount('#app') ``` 这样,你就可以在你的Vue项目使用Element UI了。记得在需要使用Element UI的组件按照它的文档使用相应的组件即可。 #### 引用[.reference_title] - *1* [在vue项目使用Element-ui基本教程](https://blog.csdn.net/Im_xiaopei/article/details/120619446)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Vue开发实例(03)之Vue项目引入element_ui](https://blog.csdn.net/dkm123456/article/details/122260955)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值