Skip to content

Commit 561f3fe

Browse files
JustineoJustineo
committed
feat: update veui and add rating
1 parent 1333735 commit 561f3fe

File tree

12 files changed

+555
-94
lines changed

12 files changed

+555
-94
lines changed

‎one/docs/components/rating.md

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
# Rating <small>评分</small>
2+
3+
## 示例
4+
5+
### 可编辑
6+
7+
用户可以通过交互设置评分。
8+
9+
[[ demo src="/demo/rating/normal.vue" ]]
10+
11+
### 纯展示
12+
13+
设置 [`readonly`](#props-readonly) 属性为 `true` 来展示已有的评分。
14+
15+
[[ demo src="/demo/rating/readonly.vue" ]]
16+
17+
### 评分项数
18+
19+
设置 [`max`](#props-max) 属性值来指定最多展示的评分符号。
20+
21+
[[ demo src="/demo/rating/max.vue" ]]
22+
23+
### 可清除
24+
25+
设置 [`clearable`](#props-clearable) 属性为 `true` 来允许用户通过点击已选评分项来取消选择。
26+
27+
[[ demo src="/demo/rating/clearable.vue" ]]
28+
29+
### 说明文本
30+
31+
设置 [`labels`](#props-labels) 属性值来指定每个评分符号对应的说明文本。[`label-position`](#props-label-position) 属性值可以指定说明文本是内联展示，还是通过浮层提示展示。
32+
33+
[[ demo src="/demo/rating/labels.vue" ]]
34+
35+
### 半星
36+
37+
设置 [`allow-half`](#props-allow-half) 属性为 `true` 来允许半星评分。
38+
39+
[[ demo src="/demo/rating/half.vue" ]]
40+
41+
### 自定义
42+
43+
使用 [`symbol`](#slots-symbol) 插槽来自定义评星项目的符号。
44+
45+
[[ demo src="/demo/rating/symbol.vue" ]]
46+
47+
## API
48+
49+
### 属性
50+
51+
| 名称 | 类型 | 默认值 | 描述 |
52+
| -- | -- | -- | -- |
53+
| ``max`` | `number` | `5` | 最多展示的评分项个数，只能设置为整数。 |
54+
| ``value`` | `number` | - | [^value] |
55+
| ``readonly`` | `boolean` | `false` | 是否为只读状态。 |
56+
| ``clearable`` | `boolean` | `false` | 是否允许清除已选评分项。 |
57+
| ``allow-half`` | `boolean` | `false` | 是否允许半星评分。 |
58+
| ``labels`` | `Record<number, string>` | - | 每个评分符号对应的说明文本。 |
59+
| ``label-position`` | `'inline' | 'popup'` | `'inline'` | 说明文本的展示方式，`inline` 则内联展示，`popup` 则通过悬浮提示展示。 |
60+
61+
^^^value
62+
:::badges
63+
`v-model`
64+
:::
65+
66+
已选的评分分数。范围为从 `1` 到 [`max`](#props-max) 属性值。
67+
^^^
68+
69+
### 插槽
70+
71+
| 名称 | 描述 |
72+
| -- | -- |
73+
| ``symbol`` | [^slot-symbol] |
74+
| ``label`` | [^slot-label]。 |
75+
76+
^^^slot-symbol
77+
每个评分项的符号区域。
78+
79+
默认内容：展示星星符号。
80+
81+
+++插槽参数
82+
| 名称 | 类型 | 描述 |
83+
| -- | -- | -- |
84+
| `value` | `number` | 当前符号对应的评分。 |
85+
+++
86+
^^^
87+
88+
^^^slot-label
89+
每个评分项的符号区域。
90+
91+
默认内容：[`labels`](#props-labels) 中指定的每个评分对应的说明文本。
92+
93+
+++插槽参数
94+
| 名称 | 类型 | 描述 |
95+
| -- | -- | -- |
96+
| `value` | `number` | 当前符号对应的评分。 |
97+
+++
98+
^^^
99+
100+
### 事件
101+
102+
| 名称 | 描述 |
103+
| -- | -- |
104+
| ``change`` | [^event-change] |
105+
106+
^^^event-change
107+
:::badges
108+
`v-model`
109+
:::
110+
111+
评分状态变化后触发，回调参数为 `(value: number)`。`value` 为当前已选的评分分数。
112+
^^^
113+
114+
### 自定义样式
115+
116+
| 名称 | 类型 | 默认值 | 描述 |
117+
| -- | -- | -- | -- |
118+
| ``--dls-rating-symbol-gap`` | `<length>` | - | 评分项的间距。 |
119+
| ``--dls-rating-label-spacing`` | `<length>` | - | 说明文本与评分项之间的间距。 |

‎one/docs/demo/rating/clearable.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<article>
3+
<veui-rating
4+
v-model="value"
5+
clearable
6+
/>
7+
</article>
8+
</template>
9+
10+
<script>
11+
import { Rating } from 'veui'
12+
13+
export default {
14+
components: {
15+
'veui-rating': Rating
16+
},
17+
data () {
18+
return {
19+
value: 4
20+
}
21+
}
22+
}
23+
</script>

‎one/docs/demo/rating/half.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<article>
3+
<veui-rating
4+
v-model="value"
5+
allow-half
6+
/>
7+
</article>
8+
</template>
9+
10+
<script>
11+
import { Rating } from 'veui'
12+
13+
export default {
14+
components: {
15+
'veui-rating': Rating
16+
},
17+
data () {
18+
return {
19+
value: 4
20+
}
21+
}
22+
}
23+
</script>

‎one/docs/demo/rating/labels.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<article>
3+
<section>
4+
<h4><code>label-position="inline"</code> (default)</h4>
5+
<veui-rating
6+
v-model="value"
7+
:labels="labels"
8+
/>
9+
</section>
10+
<section>
11+
<h4><code>label-position="popup"</code></h4>
12+
<veui-rating
13+
v-model="value"
14+
:labels="labels"
15+
label-position="popup"
16+
/>
17+
</section>
18+
</article>
19+
</template>
20+
21+
<script>
22+
import { Rating } from 'veui'
23+
24+
export default {
25+
components: {
26+
'veui-rating': Rating
27+
},
28+
data () {
29+
return {
30+
value: 4,
31+
labels: {
32+
1: '非常不满意',
33+
2: '不满意',
34+
3: '一般',
35+
4: '满意',
36+
5: '非常满意'
37+
}
38+
}
39+
}
40+
}
41+
</script>

‎one/docs/demo/rating/max.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<article>
3+
<veui-rating
4+
v-model="value"
5+
:max="3"
6+
/>
7+
</article>
8+
</template>
9+
10+
<script>
11+
import { Rating } from 'veui'
12+
13+
export default {
14+
components: {
15+
'veui-rating': Rating
16+
},
17+
data () {
18+
return {
19+
value: 2
20+
}
21+
}
22+
}
23+
</script>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<article>
3+
<veui-rating v-model="value"/>
4+
</article>
5+
</template>
6+
7+
<script>
8+
import { Rating } from 'veui'
9+
10+
export default {
11+
components: {
12+
'veui-rating': Rating
13+
},
14+
data () {
15+
return {
16+
value: 4
17+
}
18+
}
19+
}
20+
</script>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<article>
3+
<veui-rating
4+
v-model="value"
5+
readonly
6+
/>
7+
</article>
8+
</template>
9+
10+
<script>
11+
import { Rating } from 'veui'
12+
13+
export default {
14+
components: {
15+
'veui-rating': Rating
16+
},
17+
data () {
18+
return {
19+
value: 4
20+
}
21+
}
22+
}
23+
</script>

‎one/docs/demo/rating/symbol.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<article>
3+
<veui-rating v-model="value">
4+
<template #symbol>
5+
赞
6+
</template>
7+
</veui-rating>
8+
</article>
9+
</template>
10+
11+
<script>
12+
import { Rating } from 'veui'
13+
14+
export default {
15+
components: {
16+
'veui-rating': Rating
17+
},
18+
data () {
19+
return {
20+
value: 4
21+
}
22+
}
23+
}
24+
</script>

0 commit comments

Comments
 (0)