介绍
展示收货地址列表。
引入
代码演示
基础用法
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: 地址对象，index: 索引 | |
| select | 切换选中的地址时触发 | item: 地址对象，index: 索引 | |
| edit-disabled | 编辑不可配送的地址时触发 | item: 地址对象，index: 索引 | |
| select-disabled | 选中不可配送的地址时触发 | item: 地址对象，index: 索引 | |
| click-item | 点击任意地址时触发 | item: 地址对象，index: 索引 |
Address 数据结构
| 键名 | 说明 | 类型 | |
|---|---|---|---|
| id | 每条地址的唯一标识 | number / string | |
| name | 收货人姓名 | string | |
| tel | 收货人手机号 | number / string | |
| address | 收货地址 | string | |
| isDefault | 是否为默认地址 | boolean |
Slots
| 名称 | 说明 | 参数 | |
|---|---|---|---|
| default | 在列表下方插入内容 | - | |
| top | 在顶部插入内容 | - | |
item-bottom v2.5.0 | 在列表项底部插入内容 | 列表项的值 | |
tag v2.12.9 | 列表项标签内容自定义 | 列表项的值 |
样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考
。
| 名称 | 默认值 | 描述 | |
|---|---|---|---|
| @address-list-padding | @padding-sm @padding-sm 80px | - | |
| @address-list-disabled-text-color | @gray-6 | - | |
| @address-list-disabled-text-padding | @padding-base * 5 0 @padding-md | - | |
| @address-list-disabled-text-font-size | @font-size-md | - | |
| @address-list-disabled-text-line-height | @line-height-md | - | |
| @address-list-add-button-z-index | 999 | - | |
| @address-list-item-padding | @padding-sm | - | |
| @address-list-item-text-color | @text-color | - | |
| @address-list-item-disabled-text-color | @gray-5 | - | |
| @address-list-item-font-size | 13px | - | |
| @address-list-item-line-height | @line-height-sm | - | |
| @address-list-item-radio-icon-color | @red | - | |
| @address-list-edit-icon-size | 20px | - |
效果图：
