# AddressCard 地址卡片

## 介绍

地址卡片，用于地址列表，订单模块的地址信息

## 代码演示

### 引入组件

```json
"usingComponents": {
  "address-card": "/components/address-card/index"
}
```

### 基础用法

```html
<address-card
  is-edit
  id="1"
  name="小花"
  phone="18855558888"
  address="辽宁省大连市甘井子区敬贤街26号"
  is-default="true"
  bind:select="onSelect"
  bind:delete="onDelete"
  bind:edit="onEdit"
/>
```

<img width="320" src="https://films.qq.com/mp-ip-commercialize/address-item.png">

### 信封边框样式

```html
<address-card
  is-envelope
  is-link
  name="Aidendu"
  phone="15521387777"
  address="广东省深圳市南山区深南大道10000号"
/>
```

<img width="320" src="https://films.qq.com/mp-ip-commercialize/address-item-order-confirm.png">

### 显示收货地址按钮

```html
<address-card
  is-envelope
  is-empty="ture"
  name="Aidendu"
  phone="15521387777"
  address="广东省深圳市南山区深南大道10000号"
/>
```

<img width="320" src="https://films.qq.com/mp-ip-commercialize/address-item-empty.png">

## API

### Props

| 参数        | 说明                                      | 类型      | 默认值  |
| :---------- | :---------------------------------------- | :-------- | :------ |
| id          | 地址编号 id                               | _number_  | -       |
| name        | 用户名                                    | _string_  | -       |
| phone       | 手机号                                    | _string_  | -       |
| address     | 详细地址                                  | _string_  | -       |
| is-default  | 是否默认地址                              | _boolean_ | `false` |
| is-edit     | 是否展示右侧编辑图标                      | _boolean_ | `false` |
| is-link     | 是否展示右侧箭头图标                      | _boolean_ | `false` |
| is-envelope | 是否显示信封边框样式                      | _boolean_ | `false` |
| is-empty    | 设置 is-empty="true" 显示设置收货地址按钮 | _boolean_ | `false` |

### Events

| 事件名      | 说明                                               | 回调参数 |
| ----------- | -------------------------------------------------- | -------- |
| bind:select | 点击卡片触发                                       | 地址对象 |
| bind:edit   | 点击编辑按钮时触发                                 | 地址对象 |
| bind:delete | 左拉卡片，点击删除触发                             | 地址对象 |
| bind:link   | 点击右侧箭头                                       | event    |
| bind:add    | 点击设置收货地址按钮，只有当 is-empty="true"才显示 | event    |

### 外部样式类

| 类名         | 说明         |
| ------------ | ------------ |
| custom-class | 根节点样式类 |