docs: add docs for form
Change-Id: I6b84399995ed28e9fe098abe38465ed5d685fb47
This commit is contained in:
@@ -22,6 +22,11 @@
|
||||
| ``name`` | `string` | - | 表单项名称,可用于指定数据字段名或展示错误消息的定位。 |
|
||||
| ``field`` | `string` | - | [^field] |
|
||||
| ``rules`` | `string | Array<Object>` | - | [^rules] |
|
||||
| ``help`` | `string` | - | 表单项辅助文案。 |
|
||||
| ``help-position`` | `'bottom' | 'side'` | `'side'` | [^help-position] |
|
||||
| ``abstract`` | `boolean=` | `false` | 抽象表单项,抽象的项目没有标题,也不会展示校验信息。 |
|
||||
| ``withhold-validity`` | `boolean=` | `false` | 当设置为 `true` 时,该表单项内容中的输入组件(如 `veui-input` )不会自动绑定校验事件,也不会自动进入 `invalid` 状态,使用方可以通过 `default` 插槽来自行定制。 |
|
||||
| ``validity-display`` | `'normal' | 'simple'` | `'simple'` | [^validity-display] |
|
||||
|
||||
^^^ui
|
||||
预设样式。
|
||||
@@ -116,16 +121,45 @@ let minLengthRule = {
|
||||
+++
|
||||
^^^
|
||||
|
||||
^^^help-position
|
||||
表单项辅助文案的展示位置。
|
||||
|
||||
+++辅助文案位置
|
||||
| 值 | 描述 |
|
||||
| -- | -- |
|
||||
| `side` | 辅助文案展示在表单项内的侧边。 |
|
||||
| `bottom` | 辅助文案展示在表单项内的下方,在校验信息之前。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
^^^validity-display
|
||||
表单项的校验信息是否展示图标。
|
||||
|
||||
+++详情说明
|
||||
| 值 | 描述 |
|
||||
| -- | -- |
|
||||
| `normal` | 校验信息展示图标。 |
|
||||
| `simple` | 校验信息不展示图标。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
### 插槽
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``default`` | 用于内联输入组件。无默认内容。 |
|
||||
| ``default`` | 用于内联输入组件。作用域参数为 `(listeners: object, invalid: boolean, validities: object, readonly: boolean, disabled: boolean)`,其中 `invalid` 是当前表单项是否校验出错误,`listeners` 是校验时机的事件绑定,`validities` 是校验信息。 |
|
||||
| ``label`` | 填充表单项描述的内容。默认为 [`label`](#props-label) 属性的文本值。 |
|
||||
| ``tip`` | 填充表单项提示的内容。默认为 [`tip`](#props-tip) 属性的文本值。 |
|
||||
| ``help`` | 表单项辅助文本内容。默认为 [`help`](#props-help) 属性的文本值。 |
|
||||
|
||||
### 图标
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``alert`` | 警示图标。 |
|
||||
|
||||
### 全局配置
|
||||
|
||||
| 配置项 | 类型 | 默认值 | 描述 |
|
||||
| -- | -- | -- | -- |
|
||||
| ``field.validityDisplay`` | `'normal' | 'simple'` | `'simple'` | 见 [`validity-display`](#props-validity-display) 属性。 |
|
||||
|
||||
@@ -24,10 +24,22 @@
|
||||
|
||||
[[ demo src="/demo/form/disabled.vue" ]]
|
||||
|
||||
### 提示与辅助文本
|
||||
|
||||
[[ demo src="/demo/form/help.vue" ]]
|
||||
|
||||
### 校验
|
||||
|
||||
[[ demo src="/demo/form/validate.vue" ]]
|
||||
|
||||
### 抽象表单项
|
||||
|
||||
[[ demo src="/demo/form/abstract.vue" ]]
|
||||
|
||||
### 原生输入框与表单项整合
|
||||
|
||||
[[ demo src="/demo/form/withhold.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
72
one/docs/components/message.md
Normal file
72
one/docs/components/message.md
Normal file
@@ -0,0 +1,72 @@
|
||||
# Message <small>消息</small>
|
||||
|
||||
## 示例
|
||||
|
||||
`Message` 有五种状态,分别是 `success`、`info`、`warning` 、`error` 和 `aux`,可以通过 [`status`](#props-status) 属性指定不同的类型。
|
||||
|
||||
`Message` 有四种变体,分别是 `normal`、`popup`、`simple` 和 `standalone`,可以通过 [`display`](#props-display) 属性指定不同的变体。
|
||||
|
||||
[[ demo src="/demo/message/default.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| -- | -- | -- | -- |
|
||||
| ``ui`` | `string=` | `'m'` | [^ui] |
|
||||
| ``status`` | `'success' | 'error' | 'info' | 'warning' | 'aux'` | `'info'` | [^status] |
|
||||
| ``display`` | `'normal' | 'popup' | 'simple' | 'standalone'` | `'normal'` | [^display] |
|
||||
|
||||
^^^ui
|
||||
预设样式。
|
||||
|
||||
+++枚举值
|
||||
| 值 | 描述 |
|
||||
| -- | -- |
|
||||
| `s` | 小尺寸样式。 |
|
||||
| `m` | 中尺寸样式。 |
|
||||
+++
|
||||
|
||||
^^^status
|
||||
消息状态。
|
||||
|
||||
+++枚举值
|
||||
| 值 | 描述 |
|
||||
| -- | -- |
|
||||
| `info` | 消息提示样式。 |
|
||||
| `success` | 成功样式。 |
|
||||
| `warning` | 警告样式。 |
|
||||
| `error` | 错误样式。 |
|
||||
| `aux` | 辅助样式。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
^^^display
|
||||
消息展示形态。
|
||||
|
||||
+++枚举值
|
||||
| 值 | 描述 |
|
||||
| -- | -- |
|
||||
| `normal` | 普通样式,有图标和带状态文本。 |
|
||||
| `popup` | 气泡样式。 |
|
||||
| `simple` | 简单样式,没有图标。 |
|
||||
| `standalone` | 独立样式,有图标和无状态文本。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
### 插槽
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``default`` | 消息内容区域 |
|
||||
|
||||
### 图标
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``success`` | 成功消息。 |
|
||||
| ``warning`` | 警告消息。 |
|
||||
| ``info`` | 信息消息。 |
|
||||
| ``error`` | 错误消息。 |
|
||||
| ``aux`` | 辅助消息。 |
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
### 尺寸
|
||||
|
||||
可选的尺寸 [`ui`](#props-ui) 属性值:`s`/`m`。
|
||||
可选的尺寸 [`ui`](#props-ui) 属性值:`m`。
|
||||
|
||||
[[ demo src="/demo/nav/size.vue" ]]
|
||||
|
||||
@@ -42,7 +42,6 @@
|
||||
+++枚举值
|
||||
| 值 | 描述 |
|
||||
| -- | -- |
|
||||
| `s` | 小尺寸样式。 |
|
||||
| `m` | 中尺寸样式。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
Reference in New Issue
Block a user