介绍 Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
目前 Vant 官方提供了 Vue 版本和微信小程序版本，并由社区团队维护 React 版本。
#安装 Vue Cli npm install -g @vue/cli
创建一个项目 vue create hello-world
#创建完成后，可以通过命令打开图形化界面，如下图所示 vue ui
基础用法
<van-empty description="描述文字" style />引入 import Vue from ‘vue’; import { AddressList } from ‘vant’;
Vue.use(AddressList); 代码演示 基础用法
<div class ="c-address" <van-address-list v-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-delete show-set-default show-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.id areaList, 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) } };介绍 省市区三级联动选择，通常与弹出层组件配合使用。
引入
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.
引入 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.chosenAddressId id: 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>