@wlydfe/pro-ui 0.2.20 → 0.2.21

package/docs/components/form.md

@@ -0,0 +1,478 @@
+# Form 表单
+
+::: warning 注意
+表单`v-model`绑定的值尽量使用 ref 定义绑定的值，以避免 reactive 带来的响应式丢失问题。 <el-text  type="primary" tag="ins">[参考 reactive 的局限性](https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive)</el-text>
+:::
+
+## 基础用法(默认通栏)
+
+:::demo
+
+form/basic
+
+:::
+
+## 两列
+
+:::demo
+
+form/two-columns
+
+:::
+
+## 混合
+
+:::demo
+
+form/mixed
+
+:::
+
+## 隐藏 label
+
+表单整体的`hasLabel` 设置为 `false` 时, 隐藏 label。配置[columns](/components/config.html)中的 `hasLabel`可以控制单个表单项的 label 是否显示， 优先级会更高。
+
+:::demo
+
+form/has-label
+
+:::
+
+## 异步（动态）数据用法
+
+[PlusColumn](/components/config.html) 配置中的 `options` 支持数组，computed <el-tag  effect="dark">推荐</el-tag>，函数和 Promise。
+[PlusColumn](/components/config.html) 配置中的 `fieldProps`和`formItemProps` 支持对象 object，computed，函数和 Promise。
+
+**常见的使用场景是数据来自后端接口，这里调用后端接口，options 返回 [OptionsRow[]](/components/type.html#optionsrow)数组即可。**
+
+::: tip 提示
+`options` 建议优先使用 `computed`，可防止用函数在`columns`配置项数据变更后函数重复执行的问题。
+
+使用步骤为：
+
+- 1. `columns`配置项外面定义一个 `ref`数组
+- 2. 外部异步函数获取到值赋值到 `ref`
+- 3.  `columns`配置项里用 `computed`返回 `ref` 的 `value`
+
+参考下面<el-tag effect="dark">推荐写法</el-tag>代码示例。
+:::
+
+:::demo
+
+form/async
+
+:::
+
+## 数据属性联动
+
+[PlusColumn](/components/config.html)的`fieldProps`，`formItemProps`，`options`，`hideInForm`等根据数据变化，动态显示设置。
+
+如下示例，点击状态选择框，当状态为`已解决` 时，`要求1 多选框`会变成 1 个可选， `名称 1，2 输入框`会被禁用，`标签 1 输入框`会被隐藏，`标签 2 输入框`会变成必填。
+
+:::demo
+
+form/data-attribute-linkage
+
+:::
+
+## 表单多级数据的双向绑定
+
+<el-tag>v0.1.7</el-tag>
+
+[columns](/components/config.html)中的 `prop`支持 `x.y.z`形式的 多（无限）级数据形式。
+
+:::demo
+
+form/multiple-level-form
+
+:::
+
+## 表单配置项 v-model 修饰符的使用
+
+对于输入框想添加`.trim`，`.number` 和 `.lazy` 这些修饰符，可以配置 `columns`中 `fieldProps`的`modelModifiers`属性。
+
+[参考 Vue 官网 v-model 饰符的使用](https://cn.vuejs.org/guide/components/v-model.html#handling-v-model-modifiers)
+
+:::demo
+form/model-modifiers
+:::
+
+## 分组表单
+
+配置 `group` 字段，则显示分组。配置 `group` 字段后，`columns` 则不在生效。
+
+`group` 配置参考 [PlusFormGroupRow](/components/type.html#plusformgrouprow)
+
+:::demo
+
+form/group
+
+:::
+
+## 分组表单动态隐藏
+
+<el-tag>v0.1.4</el-tag>
+
+配置 [PlusFormGroupRow](/components/type.html#plusformgrouprow)[`hideInGroup`] 字段为`true`，隐藏当前分组，支持计算属性。
+
+:::demo
+
+form/group-hide
+
+:::
+
+## 分组表单自定义头部
+
+添加 `group-header` 插槽即可实现。
+
+:::demo
+
+form/group-header
+
+:::
+
+## 分组表单自定义每一步内容
+
+<el-tag>v0.1.25</el-tag>
+
+[PlusFormGroupRow](/components/type.html#plusformgrouprow) 新增`value`属性，`PlusForm` 组件会自动根据 `group` 配置项的 `name` 生成对应的插槽，例如下面的配置项，则会自动生成名称叫做 [ **plus-group-`one`** ]的个插槽，插槽的生成规则就是 固定 key 值 [ **plus-group-** ] 然后加上`group`配置项的 `name`。
+
+:::demo
+
+form/form-group-slot
+
+:::
+
+## 表单单项插槽配置
+
+组件提供 `fieldSlots` 对象可以简易配置表单单项插槽， `fieldSlots` 的插槽配置是根据表单的 [valueType](/components/config.html#valuetype-可选的表单值) 自动进行匹配的，
+如：
+
+- `valueType` 是 `undefined`(默认值)时，`fieldSlots`的插槽就是给 [ElInput](https://element-plus.org/zh-CN/component/input.html#slots)的。
+- `valueType` 是 `autocomplete`时，`fieldSlots`的插槽就是给 [ElAutocomplete](https://element-plus.org/zh-CN/component/autocomplete.html#slots)的。
+- 其他以此类推（特殊的除外）
+
+**特殊的**
+
+- `valueType` 是 `checkbox`时，`fieldSlots`的插槽就是给 [ElCheckboxGroup ](https://element-plus.org/zh-CN/component/checkbox.html#checkboxbutton-api)的。
+- `valueType` 是 `radio`时，`fieldSlots`的插槽就是给 [ElRadioGroup ](https://element-plus.org/zh-CN/component/radio.html#radiogroup-slots)的。
+
+要实现更强大的自定义，请使用[自定义表单项](/components/form.html#自定义表单项-插槽)。
+
+::: warning 注意
+
+valueType 的值对应的组件本身没有插槽时，`fieldSlots`不生效。
+:::
+
+:::demo
+
+form/field-slots
+
+:::
+
+## 自定义表单底部按钮
+
+组件提供 `footer` 插槽可以自定义表单底部，并提供默认的 **提交**方法、**重置**方法 的作用域插槽参数 `{handleSubmit,handleReset}`。
+
+:::demo
+
+form/custom-footer
+
+:::
+
+## 自定义表单项 (插槽)
+
+:::warning 注意
+**插槽 的优先级低于 renderField，高于 valueType**。
+:::
+
+`PlusForm` 组件会自动根据配置项的 `prop` 生成对应的插槽，例如下面的配置项，则会自动生成两个名称叫做 [ **plus-field-`name`** ]和 [ **plus-field-`status`**] 的两个插槽，插槽的生成规则就是 固定 key 值 [ **plus-field-** ] 然后加上 配置项的 `prop`。
+
+```ts
+import { PlusColumn } from 'plus-pro-components'
+
+const tableConfig: PlusColumn[] = [
+  {
+    label: '名称',
+    // 自动生成对应的插槽 'plus-field-name'
+    prop: 'name'
+  },
+  {
+    label: '状态',
+    // 自动生成对应的插槽 'plus-field-status'
+    prop: 'status'
+  }
+]
+```
+
+:::demo
+
+form/custom-slot
+
+:::
+
+## 自定义表单项 (renderField)
+
+:::warning 注意
+**renderField 的优先级高于插槽**。
+:::
+
+自定义表单项的核心方法是定义 `renderField`方法， `renderField` 方法需要返回一个 [VNode](https://cn.vuejs.org/guide/extras/render-function.html) 或 `String`
+
+::: tip 提示
+`renderField 返回的值`的`props` 和配置项的`fieldProps`会同时生效，`renderField 返回的值`的`props`优先级高于 `fieldProps`.
+
+:::
+
+:::demo
+
+form/custom
+
+:::
+
+## 自定义表单项 (jsx/tsx)
+
+:::warning 注意
+
+jsx/tsx 的使用需要将 vue 单文件组件的`script`的属性 `lang`设置为`jsx`或者`tsx`，`jsx` 中值使用单花括号`{}`绑定。
+
+```html
+<script lang="tsx" setup></script>
+```
+
+:::
+
+`jsx/tsx` 的支持本质是`jsx/tsx`解析出来是`VNode`, 使用 renderField 函数自定义表单项。
+
+:::demo
+
+form/custom-tsx
+
+:::
+
+## 自定义表单 label (插槽)
+
+:::warning 注意
+**插槽 的优先级低于 renderLabel，高于 label**。
+:::
+
+`PlusForm` 组件会自动根据配置项的 `prop` 生成对应的插槽，例如下面的配置项，则会自动生成两个名称叫做 [ **plus-label-`name`** ]和 [ **plus-label-`status`**] 的两个插槽，插槽的生成规则就是 固定 key 值 [ **plus-label-** ] 然后加上 配置项的 `prop`。
+
+```ts
+import { PlusColumn } from 'plus-pro-components'
+
+const tableConfig: PlusColumn[] = [
+  {
+    label: '名称',
+    // 自动生成对应的插槽 'plus-label-name'
+    prop: 'name'
+  },
+  {
+    label: '状态',
+    // 自动生成对应的插槽 'plus-label-status'
+    prop: 'status'
+  }
+]
+```
+
+:::demo
+
+form/custom-label-slot
+
+:::
+
+## 自定义表单 label (renderLabel)
+
+:::warning 注意
+**renderLabel 的优先级高于插槽**。
+:::
+
+自定义表单项的核心方法是定义 `renderLabel`方法， `renderLabel` 方法需要返回一个 [VNode](https://cn.vuejs.org/guide/extras/render-function.html) 或 `String`
+
+:::demo
+
+form/custom-label
+
+:::
+
+## 自定义表单 label (jsx/tsx)
+
+:::warning 注意
+
+jsx/tsx 的使用需要将 vue 单文件组件的`script`的属性 `lang`设置为`jsx`或者`tsx`，`jsx` 中值使用单花括号`{}`绑定。
+
+```html
+<script lang="tsx" setup></script>
+```
+
+:::
+
+`jsx/tsx` 的支持本质是`jsx/tsx`解析出来是`VNode`, 使用 renderField 函数自定义表单项。
+
+:::demo
+
+form/custom-label-tsx
+
+:::
+
+## 自定义表单下一行的内容
+
+支持 [renderExtra](/components/config.html) 渲染函数，支持 jsx/tsx，支持插槽，插槽的生成规则就是 固定 key 值 [ **plus-extra-** ] 然后加上 配置项的 `prop`。
+
+:::demo
+
+form/extra
+
+:::
+
+## 自定义表单上一行的内容
+
+<el-tag>v0.1.25</el-tag>
+
+支持 [renderPrevious](/components/config.html) 渲染函数，支持 jsx/tsx，支持插槽，插槽的生成规则就是 固定 key 值 [ **plus-previous-** ] 然后加上 配置项的 `prop`。
+
+:::demo
+
+form/previous
+
+:::
+
+## 自定义表单每一项子项的内容
+
+<el-tag>v0.0.7</el-tag>
+
+::: warning 注意
+
+- 仅当[PlusColumn](/components/config.html)的`valueType` 为 `checkbox` | `radio` | `select` |`plus-radio`之一时生效。
+
+- 当[PlusColumn](/components/config.html)的`valueType` 为`select`时，不建议定义`label`【无法回显】
+
+- 当 `fieldSlot`函数 和`fieldChildrenSlot`函数同时出现的时候，`fieldSlot`函数的优先级更高。
+
+  :::
+
+[PlusColumn](/components/config.html)提供 [fieldChildrenSlot](/components/config.html) 函数可整体自定义表单每一项的子项，[PlusColumn](/components/config.html)的`options`中提供 [fieldSlot](/components/type.html#optionsrow) 函数可单独自定义表单每一项子项的内容。
+
+:::demo
+
+form/field-children-slot
+
+:::
+
+## 自定义 tooltip icon
+
+<el-tag>v0.0.3</el-tag>
+
+使用`tooltip-icon`插槽 可自定义 tooltip icon。
+
+:::demo
+
+form/tooltip-icon-slot
+
+:::
+
+## 所有内置的表单类型
+
+:::demo
+
+form/all
+
+:::
+
+## Form API
+
+## Form Attributes
+
+| 名称                                         | 说明                                                                                                                                                                                                                  | 类型                                                                                     | 默认值  | 是否必须 |
+| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------- | -------- |
+| `model-value / v-model`                      | 表单绑定值 <el-text type="warning">（尽量使用 ref 定义绑定的值，以避免 reactive 带来的响应式丢失问题）</el-text>                                                                                                      | `object` [FieldValues](/components/type.html#fieldvalues)                                |         | 否       |
+| `defaultValues`                              | 点击重置按钮时 赋值给表单                                                                                                                                                                                             | `object` [FieldValues](/components/type.html#fieldvalues)                                | `{}`    | 否       |
+| `columns`                                    | 表单配置信息                                                                                                                                                                                                          | `array`[PlusColumn[]](/components/config.html)                                           | `[]`    | 否       |
+| `rowProps`                                   | el-row 的 props                                                                                                                                                                                                       | `object`[RowProps](https://element-plus.org/zh-CN/component/layout.html#row-attributes)  |         | 否       |
+| `colProps`                                   | el-col 属性                                                                                                                                                                                                           | `object`[ColProps](https://element-plus.org/zh-CN/component/layout.html#col-attributes)  |         | 否       |
+| `labelWidth`                                 | el-form 的 labelWidth                                                                                                                                                                                                 | `string`                                                                                 | `80px`  | 否       |
+| `labelPosition`                              | el-form 的 labelPosition                                                                                                                                                                                              | `string` <docs-tip content="'left' / 'right' / 'top'"></docs-tip>                        | `left`  | 否       |
+| `labelSuffix`                                | el-form 的 labelSuffix                                                                                                                                                                                                | `string`                                                                                 | `:`     | 否       |
+| `hasErrorTip`                                | 是否需要校验 message 提示                                                                                                                                                                                             | `boolean`                                                                                | `true`  | 否       |
+| `hasFooter`                                  | 是否需要底部按钮                                                                                                                                                                                                      | `boolean`                                                                                | `true`  | 否       |
+| `footerAlign`                                | 底部按钮对齐方式                                                                                                                                                                                                      | `string` <docs-tip content="'left' / 'right' / 'center' "></docs-tip>                    | `left`  | 否       |
+| `hasReset`                                   | 是否需要底部按钮 `重置`                                                                                                                                                                                               | `boolean`                                                                                | `true`  | 否       |
+| `hasLabel`                                   | 是否显示 label，值为`false`时`labelWidth`会被设置为`0`，labelSuffix 会被设置为`''`                                                                                                                                    | `boolean`                                                                                | `true`  | 否       |
+| `submitLoading`                              | 确定按钮 loading                                                                                                                                                                                                      | `boolean`                                                                                | `false` | 否       |
+| `rules`                                      | 表单校验                                                                                                                                                                                                              | `object` [FormRules](https://element-plus.org/zh-CN/component/form.html#form-attributes) | `{}`    | 否       |
+| `group`                                      | 分组表单配置                                                                                                                                                                                                          | `false` / (`array` [PlusFormGroupRow[]](/components/type.html#plusformgrouprow) )        | `false` | 否       |
+| `cardProps`<el-tag>v0.1.1</el-tag>           | 分组表单 [el-card](https://element-plus.org/zh-CN/component/card.html#attributes) 的 props，`group`存在时生效 ，优先级低于`group`配置的每一项的`cardProps` [PlusFormGroupRow](/components/type.html#plusformgrouprow) | `object` [ElCardProps](https://element-plus.org/zh-CN/component/card.html#attributes)    | `false` | 否       |
+| `submitText`                                 | 提交按钮文字                                                                                                                                                                                                          | `string`                                                                                 | `提交`  | 否       |
+| `resetText`                                  | 重置按钮文字                                                                                                                                                                                                          | `string`                                                                                 | `重置`  | 否       |
+| `prevent`<el-tag>v0.1.13</el-tag>            | 阻止 el-form 的默认提交表单行为                                                                                                                                                                                       | `boolean`                                                                                | `false` | 否       |
+| `collapseTransition`<el-tag>v0.1.15</el-tag> | 是否需要表单变化动画，**在[PlusSearch](/components/search.html#search-attributes)和[PlusStepsForm ](/components/steps-form.html#stepsform-attributes)组件中效果明显**                                                 | `boolean`                                                                                | `true`  | 否       |
+| `collapseDuration`<el-tag>v0.1.15</el-tag>   | 表单变化动画持续时长(单位：ms)                                                                                                                                                                                        | `number`                                                                                 | `300`   | 否       |
+| `clearable`<el-tag>v0.1.18</el-tag>          | 表单内所有表单项的是否可清除，会显示清除图标，优先级低于配置项的 [PlusColumn[fieldProps]](/components/config.html)里的`clearable`                                                                                     | `boolean`                                                                                | `true`  | 否       |
+| ...                                          | ...                                                                                                                                                                                                                   | ...                                                                                      | ...     | ...      |
+
+**`...`表示同时支持所有[ElForm Attributes](https://element-plus.org/zh-CN/component/form.html#form-attributes)**
+
+:::tip 提示
+**[ElForm](https://element-plus.org/zh-CN/component/form.html#form-attributes) 的 model 参数已在组件内部处理，一般不需要传**。
+:::
+
+## Form Events
+
+| 名称          | 说明                             | 类型                                                                                        |
+| ------------- | -------------------------------- | ------------------------------------------------------------------------------------------- |
+| `submit`      | 点击提交按钮校验通过触发的事件   | `function` <docs-tip content='(values: FieldValues) => void'></docs-tip>                    |
+| `change`      | 表单变化触发的事件               | `function` <docs-tip content='(values: FieldValues,column: PlusColumn) => void'></docs-tip> |
+| `reset`       | 点击重置按钮触发的事件           | `function` <docs-tip content='(values: FieldValues) => void'></docs-tip>                    |
+| `submitError` | 点击提交按钮校验不通过触发的事件 | `function` <docs-tip content='(error:any) => void'></docs-tip>                              |
+| ...           | ...                              | ...                                                                                         |
+
+**`...`表示同时支持所有[ElForm Events](https://element-plus.org/zh-CN/component/form.html#form-%E4%BA%8B%E4%BB%B6)**
+
+:::tip 提示
+
+如 el-form 的 validate，如下示例
+:::
+
+示例：
+
+> 模板中
+
+```html
+<PlusForm @validate="handleValidate" />
+```
+
+> setup 中
+
+```ts
+const handleValidate = (prop: FormItemProp, isValid: boolean, message: string) => {
+  console.log(dropdownItem)
+}
+```
+
+## Form Slots
+
+| 插槽名                                     | 说明                                                                                                                                                     | 作用域插槽参数                                                    |
+| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
+| `default`                                  | 表单的内容 默认是 `PlusFormItem` 组件                                                                                                                    |                                                                   |
+| `footer`                                   | 表单底部按钮                                                                                                                                             | `{handleReset,handleSubmit}`                                      |
+| `tooltip-icon`<el-tag>v0.0.3</el-tag>      | tooltip icon                                                                                                                                             |                                                                   |
+| `group-header`                             | 分组表单头部，配置 `group` 字段时生效。                                                                                                                  | `{title,columns,icon,index}` <el-tag>v0.1.17</el-tag> 新增`index` |
+| `plus-field-*`                             | 自定义表单项，组件会自动根据配置项的 `prop` 生成对应的插槽                                                                                               | `{prop,label,fieldProps,valueType,column}`                        |
+| `plus-label-*`                             | 自定义表单项 `label`，组件会自动根据配置项的 `prop` 生成对应的插槽                                                                                       | `{prop,label,fieldProps,valueType,column}`                        |
+| `plus-extra-*`                             | 自定义渲染[el-form-item](https://element-plus.org/zh-CN/component/form.html#formitem-api) 下一行额外的内容，组件会自动根据配置项的 `prop` 生成对应的插槽 | `{column}`                                                        |
+| `plus-previous-*` <el-tag>v0.1.25</el-tag> | 自定义渲染[el-form-item](https://element-plus.org/zh-CN/component/form.html#formitem-api) 上一行额外的内容，组件会自动根据配置项的 `prop` 生成对应的插槽 | `{column}`                                                        |
+| `plus-group-*` <el-tag>v0.1.25</el-tag>    | 分组表单自定义每一步内容，组件会自动根据分组表单`group`配置项的 `name` 生成对应的插槽                                                                    | `{title,columns,icon,index,name}`                                 |
+
+## Exposes
+
+| 名称           | 说明                                                                | 类型                                                                 |
+| -------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------- |
+| `formInstance` | `el-form` 实例                                                      | `object` <docs-tip content="InstanceType<typeof ElForm>"></docs-tip> |
+| `handleReset`  | 表单默认的重置方法，同时会清空校验                                  | `function` <docs-tip content="() => void"></docs-tip>                |
+| `handleSubmit` | 表单默认的提交方法，有校验的话，校验成功返回`true`，失败返回`false` | `function` <docs-tip content=" () => Promise<boolean>"></docs-tip>   |
+
+**拿到 formInstance 后支持所有[ElForm 方法](https://element-plus.org/zh-CN/component/form.html#form-exposes)**
+
+::: tip 提示
+如 `validate`,`validateField`等
+:::

package/docs/components/header.md

@@ -0,0 +1,66 @@
+# Header 页头
+
+## 简介
+
+PlusHeader 页面头部。
+
+## 基础用法
+
+:::demo
+
+header/basic
+
+:::
+
+## 自定义左侧和右侧 (renderHeaderLeft/renderHeaderRight)
+
+:::demo
+
+header/render
+
+:::
+
+## 自定义左侧和右侧 (插槽)
+
+:::demo
+
+header/slots
+
+:::
+
+## 用户下拉自定义
+
+:::demo
+
+header/dropdown
+
+:::
+
+## Header API
+
+## Header Attributes
+
+| 名称                | 说明                  | 类型                                                                                                                          | 默认值                                     | 是否必须 |
+| ------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | -------- |
+| `logo`              | logo                  | `string`                                                                                                                      | `https://plus-pro-components.com/logo.png` | 否       |
+| `title`             | 标题                  | `string`                                                                                                                      | `PlusProComponents`                        | 否       |
+| `trigger`           | 名称头像下拉触发方式  | `string` <docs-tip content='"click"/"hover"'></docs-tip>                                                                      | `click`                                    | 否       |
+| `hasUserInfo`       | 是否需要用户信息      | `boolean`                                                                                                                     | `true`                                     | 否       |
+| `userInfo`          | 用户信息              | `object` <docs-tip content='{ username?: string; avatar?: string  }'></docs-tip>                                              | `{}`                                       | 否       |
+| `logoutText`        | 退出登录文字          | `string`                                                                                                                      | `退出登录`                                 | 否       |
+| `dropdownList`      | 下拉其他选项          | `array`<docs-tip content='{ label: string;value: string }[]'></docs-tip>                                                      | `[]`                                       | 否       |
+| `renderHeaderLeft`  | 自定义左侧            | `function`<docs-tip content='(info: { logo: string;title: string}) => VNode'></docs-tip>                                      |                                            | 否       |
+| `renderHeaderRight` | 自定义右侧            | `function`<docs-tip content='(info: { userinfo: { username?: string; avatar?: string  };title: string}) => VNode'></docs-tip> |                                            | 否       |
+
+## Header Events
+
+| 名称                | 说明               | 类型                                                      |
+| ------------------- | ------------------ | --------------------------------------------------------- |
+| `clickDropdownItem` | 点击下拉单项时触发 | `function` <docs-tip content='(item) => void'></docs-tip> |
+
+## Header Slots
+
+| 插槽名         | 说明           | 作用域插槽参数     |
+| -------------- | -------------- | ------------------ |
+| `header-left`  | 自定义头部左侧 | `{logo,title}`     |
+| `header-right` | 自定义头部右侧 | `{userInfo,title}` |

package/docs/components/input-tag.md

@@ -0,0 +1,73 @@
+# InputTag 输入标签
+
+InputTag 组件由 [ElTag](https://element-plus.org/zh-CN/component/tag.html) 和[ElInput](https://element-plus.org/zh-CN/component/input.html) 组成。
+
+::: tip 提示
+
+element-plus 官方已经在<el-tag>v2.9.0</el-tag>版本中支持了 [input-tag](https://element-plus.org/zh-CN/component/input-tag.html) 组件。
+:::
+
+## 基础用法
+
+:::demo
+
+input-tag/basic
+
+:::
+
+## 数量限制
+
+:::demo
+
+input-tag/limit
+
+:::
+
+## 禁用
+
+:::demo
+
+input-tag/disabled
+
+:::
+
+## 触发方式
+
+默认 `失去焦点`、`按回车键`、`按空格键`都可以触发，这几种触发方式可以任意组合。
+:::demo
+
+input-tag/trigger
+
+:::
+
+## InputTag API
+
+## InputTag Attributes
+
+| 名称                                      | 说明                                                                               | 类型                                                               | 默认值                       | 是否必须 |
+| ----------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ---------------------------- | -------- |
+| `model-value / v-model`                   | 输入标签组件绑定值 （**不可重复**）                                                | `array` <docs-tip content="string[]"></docs-tip>                   |                              | 否       |
+| `trigger`                                 | 触发输入内容变成标签的方式                                                         | `array`/`string` <docs-tip content="string[]/string"></docs-tip>   | `['blur', 'enter', 'space']` | 否       |
+| `limit`                                   | tag 的最大数量                                                                     | `number`                                                           |                              | 否       |
+| `formatTag`<el-tag>v0.0.3</el-tag>        | 格式化标签内容                                                                     | `function` <docs-tip content='(tag: string) => string'></docs-tip> |                              | 否       |
+| `retainInputValue`<el-tag>v0.0.3</el-tag> | 是否保留输入框的内容                                                               | `boolean`                                                          | `false`                      | 否       |
+| `tagProps`                                | [ElTag](https://element-plus.org/zh-CN/component/tag.html#tag-attributes) 的 props | `object`                                                           |                              | 否       |
+| `inputProps`                              | [ElInput](https://element-plus.org/zh-CN/component/input.html) 的 props            | `object`                                                           |                              | 否       |
+| `disabled` <el-tag>v0.1.14</el-tag>       | 禁用                                                                               | `boolean`                                                          | `false`                      | 否       |
+
+## InputTag Events
+
+| 名称                            | 说明                 | 类型                                                                                  |
+| ------------------------------- | -------------------- | ------------------------------------------------------------------------------------- |
+| `change`                        | tag 数据改变时触发   | `function` <docs-tip content='(tags:string[]) => void'></docs-tip>                    |
+| `remove`<el-tag>v0.0.3</el-tag> | 移除 tag 触发        | `function` <docs-tip content='(tag:string) => void'></docs-tip>                       |
+| `blur`<el-tag>v0.0.3</el-tag>   | 输入框失去焦点时触发 | `function` <docs-tip content='(value: string, event: FocusEvent) => void'></docs-tip> |
+| `enter`<el-tag>v0.0.3</el-tag>  | 按下回车键触发       | `function` <docs-tip content='(value: string, event: MouseEvent) => void'></docs-tip> |
+| `space`<el-tag>v0.0.3</el-tag>  | 按下空格键触发       | `function` <docs-tip content='(value: string, event: MouseEvent) => void'></docs-tip> |
+
+## Exposes
+
+| 名称            | 说明                                                                | 类型                                                                             |
+| --------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| `inputInstance` | [ElInput](https://element-plus.org/zh-CN/component/input.html) 实例 | `object` <docs-tip content="import('element-plus')['InputInstance']"></docs-tip> |
+| `tagInstance`   | [ElTag](https://element-plus.org/zh-CN/component/tag.html) 实例     | `object` <docs-tip content="import('element-plus')['TagInstance']"></docs-tip>   |