vant d的地址组件中文操作手册
vant d的 学习手册、中文操作文档
- 开发指南
- 快速上手
- 基础组件
- Empty 空状态
- 业务组件
- 地址列表
- 地址编辑
- Area 省市区选择
- Card 卡片
- Contact 联系人
- Coupon 优惠券选择器
- GoodsAction 商品导航
转载自
开发指南
介绍
Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
目前 Vant 官方提供了 Vue 版本和微信小程序版本，并由社区团队维护 React 版本。
快速上手
#安装 Vue Cli
npm install -g @vue/cli
创建一个项目
vue create hello-world
#创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui
基础组件
Empty 空状态
基础用法
<van-empty description="描述文字" style />
业务组件
地址列表
引入
import Vue from ‘vue’;
import { AddressList } from ‘vant’;
Vue.use(AddressList);
代码演示
基础用法
<div class ="c-address"
<van-address-listv-model="chosenAddressId":list="list"v-if="list.length":disabled-list="disabledList"disabled-text="以下地址超出配送范围"default-tag-text="默认"@add="onAdd"@edit="onEdit"@select = "handleSelect"
/>
import { Toast } from 'vant';export default {data() {return {chosenAddressId: '1',list: [{id: '1',name: '张三',tel: '13000000000',address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',if (params.isDefault) {this.$store.commit('user/setAddress', Number(res.data.data.id))}},],};},methods: {onAdd() {Toast('新增地址');},onEdit(item, index) {Toast('编辑地址:' + index);},handleSelect(item, index) {Toast('编辑地址:' + index);},preload()},
};
height: calc(100% - 40px);
margin:0 auto;
padding: 6px 4%;
地址编辑
引入
import Vue from 'vue';
import { AddressEdit } from 'vant';Vue.use(AddressEdit);
代码演示
基础用法
<van-address-edit:area-list="areaList"show-postal:show-deleteshow-set-defaultshow-search-result:search-result="searchResult":address-info = "info":area-columns-placeholder="['请选择', '请选择', '请选择']"@save="onSave"@delete="onDelete"
/>
import { Toast } from 'vant';export default {data() {return {id: this.$route.params.idareaList,searchResult: [],info:{}};},methods: {onSave(params) {Toast(id: Number(this.id));},onDelete(params) {Toast(const { id } = params);,{id}},onChangeDetail(val) {if (val) {this.searchResult = [{name: '黄龙万科中心',address: '杭州市西湖区',},];} },getData () {Toast('{params: { id: this.id } ');//id: info.id,},created(){if(this.editStat) this.getData()},computed: {editStat () {return this.$route.name === 'editaddress' && Boolean(this.$route.params.id)}
};
Area 省市区选择
介绍
省市区三级联动选择，通常与弹出层组件配合使用。
引入
import Vue from 'vue';
import { Area } from 'vant';Vue.use(Area);
代码演示
基础用法
要初始化一个 Area 组件，你需要传入一个 area-list 属性，数据格式具体可看下面数据格式章节。
选中省市区 如果想选中某个省市区，需要传入一个 value 属性，绑定对应的省市区 code。 配置显示列 可以通过 columns-num 属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为 2，则只会显示省市选择。 配置列占位提示文字 可以通过 columns-placeholder 属性配置每一列的占位提示文字。
<van-area title="标题"const info = res.data.data
const [province, city, county] = info.area.split('-'):area-list="areaList":columns-placeholder="['请选择', '请选择', '请选择']"
/>
省市区列表数据格式
整体是一个 object，包含 province_list, city_list, county_list 三个 key。
每项以省市区编码作为 key，省市区名字作为 value。编码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。如北京编码为 11，以零补足 6 位，为 110000。
AreaList具体格式如下：
{province_list: {110000: '北京市',120000: '天津市'},city_list: {110100: '北京市',110200: '县',120100: '天津市',120200: '县'},county_list: {110101: '东城区',110102: '西城区',110105: '朝阳区',110106: '丰台区'120101: '和平区',120102: '河东区',120103: '河西区',120104: '南开区',120105: '河北区',// ....}
}
完整数据见 Area.json
链接: https://github.com/youzan/vant/blob/dev/src/area/demo/area.js.
Card 卡片
引入
import Vue from ‘vue’;
import { Card } from ‘vant’;
Vue.use(Card);
代码演示
基础用法
营销信息
通过 origin-price 设置商品原价，通过 tag 设置商品左上角标签。
<van-card
this.info = {addressDetail: info.detail,areaCode: getAreaCode(county),isDefault: info.id === this.$store.state.user.chosenAddressIdid: info.id="2"，info.name="标签"，info.tel="2.00"，province="描述信息"，city="商品标题"，county="https://img.yzcdn.cn/vant/ipad.jpeg"origin-price="10.00"
/>
自定义内容
Card 组件提供了多个插槽，可以灵活地自定义内容。
<van-card/save'，{id: Number(this.id),params.name="2",name：params.tel="2.00"area:`${params.province}-${params.city}-${params.county}`params.addressDetail="detail:"thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
> <template #tags><van-tag plain type="danger">标签</van-tag><van-tag plain type="danger">标签</van-tag></template><template #footer><van-button size="mini">按钮</van-button><van-button size="mini">按钮</van-button></template>
</van-card>
Contact 联系人
Coupon 优惠券选择器
GoodsAction 商品导航
vant d的地址组件中文操作手册相关推荐
- Honeywell EPKS通用中文操作手册
Document Name Honeywell EPKS通用中文操作手册 Version 0_01 Status Approved Date March 21, 2022 Subject Techni ...
- sicktim571操作手册_TIM中文操作手册.PDF
TIM 中文操作手册 简介 TIM 系列激光扫描器是一款智能激光型区域扫描传感器. 得益于其小巧轻便的外形及对于激光扫描器而言极低的功耗,非常适合于AGV/RGV/机器 人及其他用于室内设备防撞及区域 ...
- Honeywell EPKS通用中文操作手册 （续）
Document Name Honeywell EPKS通用中文操作手册 Version 0_01 Status ...
- c语言航班系统使用手册,isagraf_中文操作手册.pdf
ISaGRAF 用户手册 SIXNET CHINA A1 ISaGRAF 入门 参见"ISaGRAF 自学培训手册" A.2 项目管理 为了运行 ISaGRAF 项目管理工具 在 ...
- Java11API文档,JDK11(中文API手册)
JDK11(中文API手册)是一款根据官方的API文档翻译的一款帮助手册,在词句的翻译的全面性.准确性上是非常的不错,同时采用的是.chm文件的格式,在使用的时候是非常的方便的,帮助文件内的目录是非常 ...
- vant在cell中加表格_在vant 中使用cell组件 定义图标该图片和位置操作
@本来想直接使用icon组件,使用阿里的图标库,可是怎么弄也不行,折腾一下午,最后决定使用最笨的办法,直接上代码 vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样 二级经营单位 // ...
- Win8消费者预览版下载地址 包含中文下载地址及中文手册
Win8消费者预览版下载地址(32位英文版): http://ak.or.esd.microsoft.com/pr/WCPDL/8A9D4FDFF736C5B1DBF956B89D6C8FDFD925 ...
- 修改sep客户端服务器地址,SEP服务更改IP地址操作手册
<SEP服务更改IP地址操作手册>由会员分享,可在线阅读,更多相关<SEP服务更改IP地址操作手册(6页珍藏版)>请在人人文库网上搜索. 1.SEP服务器更换IP地址操作手册1 ...
- STM32中文参考手册下载地址
STM32中文参考手册下载地址 进入官网后点击"设计资源" 选择你要下载的芯片的手册 然后找到有"完整的存储器和外设信息"字眼的文档进行下载 很多人下载的下面这 ...
最新文章
- 编写程序，统计一个长度为2的字符串在另一个字符串中出现的次数
- ReactiveCocoa初步
- centos7 ifconfig命令找不到_分享一个解决 sudo 命令找不到环境变量的小技巧
- C/C++ atol函数- C语言零基础入门教程
- MySQL笔记-binlog理论及binlog回滚恢复数据
- 构建安全的 Web Services
- Silverlight学习笔记四BusyIndicator控件(进度条)
- []TLD code run
- uva1583-digit generator
- csdn编辑器公式中插入空格
- 版本控制工具－－CVS
- 建立ad-hoc网络 // 电脑设置wifi热点 (Win10)
- 超声波传感器模块原理
- jpeg-snoo-图片信息分析工具
- windows ubuntu 双系统 蓝屏Technical information: ***stop:0x0000007B(0x80786B58,0xC0000034,0x00000000,0x00
- 路由器 设置DNS 域名拦截 重定向
- 计算机无法启动安装程序,安装Win10系统提示安装程序无法正常启动怎么办
- POJ1608 Banal Tickets
- 中学生学习心理01认知过程
- Latex中在字母上加上波浪线