Skip to content

Commit bc5ca56

Browse files
JustineoJustineo
committed
docs: refine form demo and message
1 parent a43b11c commit bc5ca56

File tree

7 files changed

+127
-99
lines changed

7 files changed

+127
-99
lines changed

‎one/docs/components/message.md

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22

33
## 示例
44

5-
`Message` 有五种状态，分别是 `success`、`info`、`warning` 、`error` 和 `aux`，可以通过 [`status`](#props-status) 属性指定不同的类型。
6-
7-
`Message` 有四种变体，分别是 `normal`、`popup`、`simple` 和 `standalone`，可以通过 [`display`](#props-display) 属性指定不同的变体。
5+
可以使用 [`status`](#props-status) 属性指定不同的上下文状态，使用 [`display`](#props-display) 属性指定不同的展示形态。
86

97
[[ demo src="/demo/message/default.vue" ]]
108

@@ -34,11 +32,11 @@
3432
+++枚举值
3533
| 值 | 描述 |
3634
| -- | -- |
37-
| `info` | 消息提示样式。 |
38-
| `success` | 成功样式。 |
39-
| `warning` | 警告样式。 |
40-
| `error` | 错误样式。 |
41-
| `aux` | 辅助样式。 |
35+
| `info` | 信息提示状态。 |
36+
| `success` | 成功状态。 |
37+
| `warning` | 警告状态。 |
38+
| `error` | 错误状态。 |
39+
| `aux` | 辅助状态。 |
4240
+++
4341
^^^
4442

@@ -49,9 +47,9 @@
4947
| 值 | 描述 |
5048
| -- | -- |
5149
| `normal` | 普通样式，有图标和带状态文本。 |
52-
| `popup` | 气泡样式。 |
50+
| `popup` | 气泡样式，默认仅展示图标，可交互调起气泡展示详细内容。 |
5351
| `simple` | 简单样式，没有图标。 |
54-
| `standalone` | 独立样式，有图标和无状态文本。 |
52+
| `standalone` | 独立样式，展示图标和无状态文本。 |
5553
+++
5654
^^^
5755

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
:data="formData"
55
>
66
<veui-field
7-
label="门店："
7+
label="门店"
88
name="store"
99
:rules="[{
10-
name: 'required', message: `请选择门店`, triggers: 'select'
10+
name: 'required', message: '请选择门店', triggers: 'select'
1111
}]"
1212
>
1313
<veui-transfer
14-
:datasource="storeList"
1514
v-model="formData.store"
15+
:datasource="storeList"
1616
>
1717
<template #selected-item-label="{ label, value }">
1818
<div class="selected-store">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
:data="formData"
1010
:disabled="disabled"
1111
>
12-
<veui-field label="姓名：">
12+
<veui-field label="姓名">
1313
<veui-input v-model="formData.name"/>
1414
</veui-field>
1515
</veui-form>

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

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,56 @@
11
<template>
22
<article>
3+
<section>
4+
<veui-checkbox
5+
v-model="helpPosition"
6+
true-value="bottom"
7+
false-value="side"
8+
>
9+
辅助信息显示在底部
10+
</veui-checkbox>
11+
</section>
312
<veui-form
413
:data="formData"
514
>
615
<veui-field
7-
label="姓名："
8-
tip="提示"
9-
help="辅助文本"
1016
name="name"
17+
label="姓名"
18+
tip="你的全名"
19+
help="至少 2 个字符"
20+
:help-position="helpPosition"
1121
>
1222
<veui-input v-model="formData.name"/>
1323
</veui-field>
1424
<veui-field
15-
label="爱好："
16-
help="辅助文本"
17-
name="hobby"
18-
help-position="bottom"
25+
name="address"
26+
label="地址"
27+
tip="居住地的详细地址"
28+
help="精确到门牌号"
29+
:help-position="helpPosition"
1930
>
20-
<veui-input v-model="formData.hobby"/>
31+
<veui-input v-model="formData.address"/>
2132
</veui-field>
2233
</veui-form>
2334
</article>
2435
</template>
2536

2637
<script>
27-
import { Form, Field, Input } from 'veui'
38+
import { Form, Field, Input, Checkbox } from 'veui'
2839
2940
export default {
3041
components: {
3142
'veui-form': Form,
3243
'veui-field': Field,
33-
'veui-input': Input
44+
'veui-input': Input,
45+
'veui-checkbox': Checkbox
3446
},
3547
data () {
3648
return {
3749
formData: {
3850
name: '',
39-
hobby: ''
40-
}
51+
address: ''
52+
},
53+
helpPosition: 'side'
4154
}
4255
}
4356
}

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

Lines changed: 28 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,20 @@
11
<template>
22
<article>
3-
<veui-form :data="formData">
4-
<veui-field label="状态：">
3+
<veui-form
4+
:data="formData"
5+
@submit="handleSubmit"
6+
>
7+
<veui-field label="型号">
58
<veui-select
6-
v-model="formData.statusSelected"
7-
:options="statusOptions"
9+
v-model="formData.model"
10+
:options="models"
811
/>
912
</veui-field>
10-
11-
<veui-field label="时间：">
12-
<veui-datepicker
13-
v-model="formData.range"
14-
range
15-
/>
16-
</veui-field>
17-
18-
<veui-field>
19-
<veui-search-box
20-
v-model="formData.query"
21-
placeholder="请输入搜索内容"
13+
<veui-field label="日期">
14+
<veui-date-picker
15+
v-model="formData.date"
2216
/>
2317
</veui-field>
24-
2518
<template #actions>
2619
<veui-button
2720
ui="primary"
@@ -36,46 +29,46 @@
3629
</template>
3730

3831
<script>
39-
import { Form, Field, Button, Select, DatePicker, SearchBox } from 'veui'
32+
import { Form, Field, Button, Select, DatePicker } from 'veui'
4033
4134
export default {
4235
components: {
4336
'veui-form': Form,
4437
'veui-field': Field,
4538
'veui-button': Button,
4639
'veui-select': Select,
47-
'veui-datepicker': DatePicker,
48-
'veui-search-box': SearchBox
40+
'veui-date-picker': DatePicker
4941
},
5042
data () {
51-
const start = new Date()
52-
const end = new Date(start.getFullYear(), start.getMonth() + 1, 0)
53-
5443
return {
55-
statusOptions: [
44+
models: [
5645
{
57-
label: '状态1',
58-
value: 1
46+
label: 'APTX-4867',
47+
value: 'aptx-4867'
5948
},
6049
{
61-
label: '状态2',
62-
value: 2
50+
label: 'APTX-4868',
51+
value: 'aptx-4868'
6352
},
6453
{
65-
label: '状态3',
66-
value: 3
54+
label: 'APTX-4869',
55+
value: 'aptx-4869'
6756
},
6857
{
69-
label: '状态4',
70-
value: 4
58+
label: 'APTX-4870',
59+
value: 'aptx-4870'
7160
}
7261
],
7362
formData: {
74-
statusSelected: 1,
75-
query: '',
76-
range: [start, end]
63+
model: null,
64+
date: null
7765
}
7866
}
67+
},
68+
methods: {
69+
handleSubmit (data) {
70+
this.$toast(JSON.stringify(data, null, 2))
71+
}
7972
}
8073
}
8174
</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
:data="formData"
1010
:readonly="readonly"
1111
>
12-
<veui-field label="姓名：">
12+
<veui-field label="姓名">
1313
<veui-input v-model="formData.name"/>
1414
</veui-field>
1515
</veui-form>

‎one/docs/demo/message/default.vue

Lines changed: 61 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,62 @@
11
<template>
22
<article>
3-
<section>
4-
<div class="control-wrapper">
5-
<veui-radio-button-group
6-
v-model="ui"
7-
:items="uiValues"
8-
/>
3+
<section class="options">
4+
<veui-radio-button-group
5+
v-model="ui"
6+
ui="s"
7+
:items="uiValues"
8+
/>
99

10-
<veui-radio-button-group
11-
v-model="display"
12-
:items="displayValues"
13-
/>
14-
</div>
15-
<div
16-
v-for="(status, index) in statuses"
17-
:key="index"
10+
<veui-radio-button-group
11+
v-model="display"
12+
ui="s"
13+
:items="displayValues"
14+
/>
15+
</section>
16+
<section>
17+
<veui-message
18+
:display="display"
19+
:ui="ui"
20+
status="info"
21+
>
22+
请在一小时内容完成付款，否则订单将自动取消
23+
</veui-message>
24+
</section>
25+
<section>
26+
<veui-message
27+
:display="display"
28+
:ui="ui"
29+
status="success"
30+
>
31+
订单创建成功
32+
</veui-message>
33+
</section>
34+
<section>
35+
<veui-message
36+
:display="display"
37+
:ui="ui"
38+
status="error"
39+
>
40+
网络连接失败
41+
</veui-message>
42+
</section>
43+
<section>
44+
<veui-message
45+
:display="display"
46+
:ui="ui"
47+
status="warning"
48+
>
49+
余额较低，请及时续费
50+
</veui-message>
51+
</section>
52+
<section>
53+
<veui-message
54+
:display="display"
55+
:ui="ui"
56+
status="aux"
1857
>
19-
<span class="message-label">{{ status }}:</span>
20-
<veui-message
21-
:display="display"
22-
:ui="ui"
23-
:status="status"
24-
>消息</veui-message>
25-
</div>
58+
允许上传的文件类型为：JPG、PNG
59+
</veui-message>
2660
</section>
2761
</article>
2862
</template>
@@ -56,23 +90,13 @@ export default {
5690
</script>
5791

5892
<style lang="less" scoped>
59-
section {
60-
margin-bottom: 10px;
61-
62-
& > div {
63-
display: flex;
64-
height: 32px;
65-
align-items: center;
66-
}
67-
68-
.message-label {
69-
min-width: 120px;
70-
}
93+
section + section {
94+
margin-top: 20px;
7195
}
7296
73-
.veui-radio-button-group {
74-
& + & {
75-
margin-left: 26px;
76-
}
97+
.options {
98+
display: flex;
99+
align-items: center;
100+
gap: 8px;
77101
}
78102
</style>

0 commit comments

Comments
 (0)