# UDynamicCards 动态卡片
- [示例](#示例)
- [基本用法](#基本用法)
- [限制数量](#限制数量)
- [Mini 自定义](#mini-自定义)
- [表单验证](#表单验证)
- [API]()
- [Props/Attrs](#propsattrs)
- [Computed](#computed)
- [Slots](#slots)
- [Events](#events)
- [Methods](#methods)
## 示例
### 基本用法
``` vue
```
### 限制数量
``` vue
```
### Mini 自定义
``` vue
{{ item.url }} {{ item.port }}
```
### 表单验证
``` vue
```
与``结合的例子。
``` vue
```
## API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| data | Array | | | 数据 |
| dynamic | boolean | | `true` | 是否可以动态添加/删除项 |
| get-default-item | Function | | | 传入获取默认项的方法 |
| initial-add | boolean | | `true` | 是否自动补充项，如果初始时`data`中的项目数少于`min-count` |
| min-count | number | | `1` | 最小项目数 |
| max-count | number | | `999` | 最大项目数 |
| text-field | string | | `'title'` | 用于 mini 显示的字段 |
| index.sync | number | | `0` | 当前展开项的索引 |
| add-button-text | string | | `'添加'` | 添加按钮的文本 |
| mini-formatter | Function | | | mini 显示时的格式器 |
### Computed
| Computed | Type | Description |
| -------- | ---- | ----------- |
| touched | boolean | 用户是否触碰 |
| dirty | boolean | 用户是否修改值 |
| valid | boolean | 验证是否通过 |
| firstError | string | 第一个错误提示消息 |
### Slots
#### (default)
展开区域的内容
| Prop | Type | Description |
| ---- | ---- | ----------- |
| item | object | 项目 |
| index | number | 索引 |
#### mini
收起时 mini 显示区的内容
| Prop | Type | Description |
| ---- | ---- | ----------- |
| item | object | 项目 |
| index | number | 索引 |
### Events
#### @before-add
添加前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.item | any | 添加的项 |
| $event.index | number | 添加的索引 |
| $event.data | Array | 当前数据 |
| $event.preventDefault | Function | 阻止添加流程 |
| senderVM | UDynamicCards | 发送事件实例 |
#### @add
添加时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.item | any | 添加的项 |
| $event.index | number | 添加的索引 |
| $event.data | Array | 当前数据 |
| senderVM | UDynamicCards | 发送事件实例 |
#### @before-remove
删除前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.item | any | 删除的项 |
| $event.index | number | 删除的索引 |
| $event.data | Array | 当前数据 |
| $event.preventDefault | Function | 阻止删除流程 |
| senderVM | UDynamicCards | 发送事件实例 |
#### @remove
删除时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.item | any | 删除的项 |
| $event.index | number | 删除的索引 |
| $event.data | Array | 当前数据 |
| senderVM | UDynamicCards | 发送事件实例 |
#### @splice
数量变更（添加/删除）时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.item | any | 变更的项 |
| $event.index | number | 变更的索引 |
| $event.data | Array | 当前数据 |
| senderVM | UDynamicCards | 发送事件实例 |
#### @validate
对于第一个 Field 或者所有子 UValidator：
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.trigger | enum | 本次验证的触发方式 |
| $event.valid | boolean | 验证是否通过 |
| $event.touched | boolean | 用户是否触碰 |
| $event.dirty | boolean | 用户是否修改值 |
| $event.firstError | string | 第一个错误提示消息 |
| senderVM | UDynamicCards | 发送事件实例 |
Methods
#### validate($event, trigger, muted)
手动验证。
| Param | Type | Default | Description |
| ----- | ---- | ------- | ----------- |
| $event | object | | 自定义事件对象 |
| trigger | string | `'submit'` | 触发方式，可选值：`submit`、`blur`和`input`之一，或者它们的任意组合。 |
| muted | boolean | `false` | 是否验证后无提示 |