Skip to content

Commit d0dd1ea

Browse files
xiaodemenJustineo
xiaodemen
authored and
Justineo
committed
docs: add docs for form
Change-Id: I6b84399995ed28e9fe098abe38465ed5d685fb47
1 parent ef735a6 commit d0dd1ea

File tree

12 files changed

+479
-93
lines changed

12 files changed

+479
-93
lines changed

‎one/docs/components/field.md

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@
2222
| ``name`` | `string` | - | 表单项名称，可用于指定数据字段名或展示错误消息的定位。 |
2323
| ``field`` | `string` | - | [^field] |
2424
| ``rules`` | `string | Array<Object>` | - | [^rules] |
25+
| ``help`` | `string` | - | 表单项辅助文案。 |
26+
| ``help-position`` | `'bottom' | 'side'` | `'side'` | [^help-position] |
27+
| ``abstract`` | `boolean=` | `false` | 抽象表单项，抽象的项目没有标题，也不会展示校验信息。 |
28+
| ``withhold-validity`` | `boolean=` | `false` | 当设置为 `true` 时，该表单项内容中的输入组件（如 `veui-input` ）不会自动绑定校验事件，也不会自动进入 `invalid` 状态，使用方可以通过 `default` 插槽来自行定制。 |
29+
| ``validity-display`` | `'normal' | 'simple'` | `'simple'` | [^validity-display] |
2530

2631
^^^ui
2732
预设样式。
@@ -116,16 +121,45 @@ let minLengthRule = {
116121
+++
117122
^^^
118123

124+
^^^help-position
125+
表单项辅助文案的展示位置。
126+
127+
+++辅助文案位置
128+
| 值 | 描述 |
129+
| -- | -- |
130+
| `side` | 辅助文案展示在表单项内的侧边。 |
131+
| `bottom` | 辅助文案展示在表单项内的下方，在校验信息之前。 |
132+
+++
133+
^^^
134+
135+
^^^validity-display
136+
表单项的校验信息是否展示图标。
137+
138+
+++详情说明
139+
| 值 | 描述 |
140+
| -- | -- |
141+
| `normal` | 校验信息展示图标。 |
142+
| `simple` | 校验信息不展示图标。 |
143+
+++
144+
^^^
145+
119146
### 插槽
120147

121148
| 名称 | 描述 |
122149
| -- | -- |
123-
| ``default`` | 用于内联输入组件。无默认内容。 |
150+
| ``default`` | 用于内联输入组件。作用域参数为 `(listeners: object, invalid: boolean, validities: object, readonly: boolean, disabled: boolean)`，其中 `invalid` 是当前表单项是否校验出错误，`listeners` 是校验时机的事件绑定，`validities` 是校验信息。 |
124151
| ``label`` | 填充表单项描述的内容。默认为 [`label`](#props-label) 属性的文本值。 |
125152
| ``tip`` | 填充表单项提示的内容。默认为 [`tip`](#props-tip) 属性的文本值。 |
153+
| ``help`` | 表单项辅助文本内容。默认为 [`help`](#props-help) 属性的文本值。 |
126154

127155
### 图标
128156

129157
| 名称 | 描述 |
130158
| -- | -- |
131159
| ``alert`` | 警示图标。 |
160+
161+
### 全局配置
162+
163+
| 配置项 | 类型 | 默认值 | 描述 |
164+
| -- | -- | -- | -- |
165+
| ``field.validityDisplay`` | `'normal' | 'simple'` | `'simple'` | 见 [`validity-display`](#props-validity-display) 属性。 |

‎one/docs/components/form.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,22 @@
2424

2525
[[ demo src="/demo/form/disabled.vue" ]]
2626

27+
### 提示与辅助文本
28+
29+
[[ demo src="/demo/form/help.vue" ]]
30+
2731
### 校验
2832

2933
[[ demo src="/demo/form/validate.vue" ]]
3034

35+
### 抽象表单项
36+
37+
[[ demo src="/demo/form/abstract.vue" ]]
38+
39+
### 原生输入框与表单项整合
40+
41+
[[ demo src="/demo/form/withhold.vue" ]]
42+
3143
## API
3244

3345
### 属性

‎one/docs/components/message.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# Message <small>消息</small>
2+
3+
## 示例
4+
5+
`Message` 有五种状态，分别是 `success`、`info`、`warning` 、`error` 和 `aux`，可以通过 [`status`](#props-status) 属性指定不同的类型。
6+
7+
`Message` 有四种变体，分别是 `normal`、`popup`、`simple` 和 `standalone`，可以通过 [`display`](#props-display) 属性指定不同的变体。
8+
9+
[[ demo src="/demo/message/default.vue" ]]
10+
11+
## API
12+
13+
### 属性
14+
15+
| 名称 | 类型 | 默认值 | 描述 |
16+
| -- | -- | -- | -- |
17+
| ``ui`` | `string=` | `'m'` | [^ui] |
18+
| ``status`` | `'success' | 'error' | 'info' | 'warning' | 'aux'` | `'info'` | [^status] |
19+
| ``display`` | `'normal' | 'popup' | 'simple' | 'standalone'` | `'normal'` | [^display] |
20+
21+
^^^ui
22+
预设样式。
23+
24+
+++枚举值
25+
| 值 | 描述 |
26+
| -- | -- |
27+
| `s` | 小尺寸样式。 |
28+
| `m` | 中尺寸样式。 |
29+
+++
30+
31+
^^^status
32+
消息状态。
33+
34+
+++枚举值
35+
| 值 | 描述 |
36+
| -- | -- |
37+
| `info` | 消息提示样式。 |
38+
| `success` | 成功样式。 |
39+
| `warning` | 警告样式。 |
40+
| `error` | 错误样式。 |
41+
| `aux` | 辅助样式。 |
42+
+++
43+
^^^
44+
45+
^^^display
46+
消息展示形态。
47+
48+
+++枚举值
49+
| 值 | 描述 |
50+
| -- | -- |
51+
| `normal` | 普通样式，有图标和带状态文本。 |
52+
| `popup` | 气泡样式。 |
53+
| `simple` | 简单样式，没有图标。 |
54+
| `standalone` | 独立样式，有图标和无状态文本。 |
55+
+++
56+
^^^
57+
58+
### 插槽
59+
60+
| 名称 | 描述 |
61+
| -- | -- |
62+
| ``default`` | 消息内容区域 |
63+
64+
### 图标
65+
66+
| 名称 | 描述 |
67+
| -- | -- |
68+
| ``success`` | 成功消息。 |
69+
| ``warning`` | 警告消息。 |
70+
| ``info`` | 信息消息。 |
71+
| ``error`` | 错误消息。 |
72+
| ``aux`` | 辅助消息。 |

‎one/docs/components/nav.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
### 尺寸
66

7-
可选的尺寸 [`ui`](#props-ui) 属性值：`s`/`m`。
7+
可选的尺寸 [`ui`](#props-ui) 属性值：`m`。
88

99
[[ demo src="/demo/nav/size.vue" ]]
1010

@@ -42,7 +42,6 @@
4242
+++枚举值
4343
| 值 | 描述 |
4444
| -- | -- |
45-
| `s` | 小尺寸样式。 |
4645
| `m` | 中尺寸样式。 |
4746
+++
4847
^^^

‎one/docs/demo/form/abstract.vue

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<template>
2+
<article>
3+
<veui-form
4+
:data="formData"
5+
>
6+
<veui-field
7+
label="门店："
8+
name="store"
9+
:rules="[{
10+
name: 'required', message: `请选择门店`, triggers: 'select'
11+
}]"
12+
>
13+
<veui-transfer
14+
:datasource="storeList"
15+
v-model="formData.store"
16+
>
17+
<template #selected-item-label="{ label, value }">
18+
<div class="selected-store">
19+
<span class="store-label">{{ label }}</span>
20+
<veui-field
21+
:key="`storeCounts.${value}`"
22+
:name="`storeCounts.${value}`"
23+
:rules="[
24+
{ name: 'required', message: `请填写${label}的数量`, triggers: 'change,blur' }
25+
]"
26+
abstract
27+
>
28+
<veui-number-input
29+
v-model="formData.storeCounts[value]"
30+
class="store-number"
31+
ui="s"
32+
:min="1"
33+
/>
34+
</veui-field>
35+
</div>
36+
</template>
37+
</veui-transfer>
38+
</veui-field>
39+
</veui-form>
40+
</article>
41+
</template>
42+
43+
<script>
44+
import { Form, Field, NumberInput, Transfer } from 'veui'
45+
46+
export default {
47+
components: {
48+
'veui-form': Form,
49+
'veui-field': Field,
50+
'veui-number-input': NumberInput,
51+
'veui-transfer': Transfer
52+
},
53+
data () {
54+
return {
55+
disabled: true,
56+
formData: {
57+
store: [],
58+
storeCounts: {}
59+
},
60+
storeList: [
61+
{ label: '门店1', value: '1' },
62+
{ label: '门店2', value: '2' },
63+
{ label: '门店3', value: '3' },
64+
{ label: '门店4', value: '4' }
65+
]
66+
}
67+
}
68+
}
69+
</script>
70+
71+
<style lang="less" scoped>
72+
.selected-store {
73+
display: flex;
74+
align-items: center;
75+
76+
.store-label {
77+
min-width: 60px;
78+
}
79+
}
80+
</style>

‎one/docs/demo/form/help.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<article>
3+
<veui-form
4+
:data="formData"
5+
>
6+
<veui-field
7+
label="姓名："
8+
tip="提示"
9+
help="辅助文本"
10+
name="name"
11+
>
12+
<veui-input v-model="formData.name"/>
13+
</veui-field>
14+
<veui-field
15+
label="爱好："
16+
help="辅助文本"
17+
name="hobby"
18+
help-position="bottom"
19+
>
20+
<veui-input v-model="formData.hobby"/>
21+
</veui-field>
22+
</veui-form>
23+
</article>
24+
</template>
25+
26+
<script>
27+
import { Form, Field, Input } from 'veui'
28+
29+
export default {
30+
components: {
31+
'veui-form': Form,
32+
'veui-field': Field,
33+
'veui-input': Input
34+
},
35+
data () {
36+
return {
37+
formData: {
38+
name: '',
39+
hobby: ''
40+
}
41+
}
42+
}
43+
}
44+
</script>
45+
46+
<style lang="less" scoped>
47+
section {
48+
margin-bottom: 20px;
49+
}
50+
</style>

‎one/docs/demo/form/withhold.vue

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<article>
3+
<veui-form
4+
:data="formData"
5+
>
6+
<veui-field
7+
label="名称："
8+
name="name"
9+
:rules="[{ name: 'required', triggers: 'input,blur' }]"
10+
>
11+
<template #default="{ invalid, listeners }">
12+
<input
13+
:class="{
14+
'demo-invalid': invalid
15+
}"
16+
v-model="formData.name"
17+
v-on="listeners"
18+
>
19+
</template>
20+
</veui-field>
21+
</veui-form>
22+
</article>
23+
</template>
24+
25+
<script>
26+
import { Form, Field } from 'veui'
27+
28+
export default {
29+
components: {
30+
'veui-form': Form,
31+
'veui-field': Field
32+
},
33+
data () {
34+
return {
35+
formData: {
36+
name: ''
37+
}
38+
}
39+
}
40+
}
41+
</script>
42+
43+
<style lang="less" scoped>
44+
.demo-invalid {
45+
border: 1px solid #cc1800;
46+
}
47+
</style>

0 commit comments

Comments
 (0)