举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > vant地址列表怎么获取值 Vant3 AddressList 地址列表

vant地址列表怎么获取值 Vant3 AddressList 地址列表

2023-05-22 03:18 Vant3中文教程

vant地址列表怎么获取值 Vant3 AddressList 地址列表

vant地址列表怎么获取值 Vant3 AddressList 地址列表

vant地址列表怎么获取值

介绍

展示收货地址列表。

实例演示

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册。

import { createApp } from "vue";
import { AddressList } from "vant";

const app = createApp();
app.use(AddressList);

代码演示

基础用法

<van-address-list
  v-model="chosenAddressId"
  :list="list"
  :disabled-list="disabledList"
  disabled-text="以下地址超出配送范围"
  default-tag-text="默认"
  @add="onAdd"
  @edit="onEdit"
/>
import { ref } from "vue";
import { Toast } from "vant";

export default {
  setup() {
    const chosenAddressId = ref("1");
    const list = [
      {
        id: "1",
        name: "张三",
        tel: "13000000000",
        address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
        isDefault: true,
      },
      {
        id: "2",
        name: "李四",
        tel: "1310000000",
        address: "浙江省杭州市拱墅区莫干山路 50 号",
      },
    ];
    const disabledList = [
      {
        id: "3",
        name: "王五",
        tel: "1320000000",
        address: "浙江省杭州市滨江区江南大道 15 号",
      },
    ];

    const onAdd = () => Toast("新增地址");
    const onEdit = (item, index) => Toast("编辑地址:" + index);

    return {
      list,
      onAdd,
      onEdit,
      disabledList,
      chosenAddressId,
    };
  },
};

API

Props

参数 说明 类型 默认值
v-model 当前选中地址的 id string -
list 地址列表 Address[] []
disabled-list 不可配送地址列表 Address[] []
disabled-text 不可配送提示文案 string -
switchable 是否允许切换地址 boolean true
add-button-text 底部按钮文字 string 新增地址
default-tag-text 默认地址标签文字 string -

Events

事件名 说明 回调参数
add 点击新增按钮时触发 -
edit 点击编辑按钮时触发 item: Address, index: number
select 切换选中的地址时触发 item: Address, index: number
edit-disabled 编辑不可配送的地址时触发 item: Address, index: number
select-disabled 选中不可配送的地址时触发 item: Address, index: number
click-item 点击任意地址时触发 item: Address, index: number

Address 数据结构

键名 说明 类型
id 每条地址的唯一标识 number | string
name 收货人姓名 string
tel 收货人手机号 number | string
address 收货地址 string
isDefault 是否为默认地址 boolean

Slots

名称 说明 参数
default 在列表下方插入内容 -
top 在顶部插入内容 -
item-bottom 在列表项底部插入内容 item: Address
tag v3.0.9 自定义列表项标签内容 item: Address

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
--van-address-list-padding var(--van-padding-sm) var(--van-padding-sm) 80px -
--van-address-list-disabled-text-color var(--van-gray-6) -
--van-address-list-disabled-text-padding var(--van-padding-base) * 5 0 var(--van-padding-md) -
--van-address-list-disabled-text-font-size var(--van-font-size-md) -
--van-address-list-disabled-text-line-height var(--van-line-height-md) -
--van-address-list-add-button-z-index 999 -
--van-address-list-item-padding var(--van-padding-sm) -
--van-address-list-item-text-color var(--van-text-color) -
--van-address-list-item-disabled-text-color var(--van-gray-5) -
--van-address-list-item-font-size 13px -
--van-address-list-item-line-height var(--van-line-height-sm) -
--van-address-list-item-radio-icon-color var(--van-danger-color) -
--van-address-list-edit-icon-size 20px -


阅读全文
以上是编程学为你收集整理的vant地址列表怎么获取值 Vant3 AddressList 地址列表全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部