vant d的地址组件中文操作手册

转载自

开发指南

介绍
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-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)
    }
};

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.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>

Contact 联系人

Coupon 优惠券选择器

GoodsAction 商品导航