107 lines
3.0 KiB
Markdown
107 lines
3.0 KiB
Markdown
|
# Rate 评分
|
|||
|
|
|
|||
|
|
用于快速的评价操作，或对评价进行展示。
|
|||
|
|
|
|||
|
|
## 基本用法
|
|||
|
|
|
|||
|
|
设置`v-model`分数，设置`num`总分数，默认为5分。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-rate v-model="value" @change="handleChange" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
const value = ref<number>(1)
|
|||
|
|
|
|||
|
|
function changeValue({ value }) {
|
|||
|
|
console.log(value)
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 只读
|
|||
|
|
|
|||
|
|
设置 `readonly` 属性。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-rate v-model="value" readonly />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 禁用
|
|||
|
|
|
|||
|
|
设置 `disabled` 属性和`disabled-color`
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-rate :modelValue="2" disabled />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 修改颜色
|
|||
|
|
|
|||
|
|
可以通过 `color` 属性修改未选中的颜色，`active-color` 修改选中的颜色。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-rate v-model="value" active-color="linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)" />
|
|||
|
|
<wd-rate v-model="value" :active-color="['linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)', 'linear-gradient(315deg, rgba(245,34,34,1) 0%,rgba(255,117,102,1) 100%)']" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 修改icon
|
|||
|
|
|
|||
|
|
可以通过 `icon` 属性修改未选中的图标，`active-icon` 修改选中的图标。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-rate v-model="value" icon="wd-icon-dong" active-icon="wd-icon-dong" active-color="#4D80F0"/>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 修改大小、间隔
|
|||
|
|
|
|||
|
|
可以通过 `size` 属性修改图标的大小，`space` 修改图标之间的间隔。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-rate v-model="value" size="30px" space="10px"/>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 允许半选
|
|||
|
|
|
|||
|
|
设置 `allowHalf` 属性。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-rate v-model="value" allow-half />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 允许清空评分
|
|||
|
|
|
|||
|
|
设置 `clearable` 属性，当 clearable 属性设置为 true，再次点击相同的值时，可以将值重置为 0。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-rate v-model="value" clearable />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Attributes
|
|||
|
|
|
|||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
|||
|
|
|-----|-----|------|-------|-------|--------|
|
|||
|
|
| v-model | 当前分数 | number | - | - | - |
|
|||
|
|
| num | 评分最大值 | number | - | 5 | - |
|
|||
|
|
| readonly | 是否只读 | boolean | - | false | - |
|
|||
|
|
| size | 图标大小 | string | - | 16px | - |
|
|||
|
|
| space | 图标间距 | string | - | 4px | - |
|
|||
|
|
| color | 未选中的图标颜色 | string | - | #E8E8E8 | - |
|
|||
|
|
| active-color | 选中的图标颜色(支持传颜色数组，共有 2 个元素，为 2 个分段所对应的颜色) | string/array | - | linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%) | - |
|
|||
|
|
| icon | 未选中的图标类名 | string | - | wd-icon-star-on | - |
|
|||
|
|
| active-icon | 选中的图标类名 | string | - | wd-icon-star-on | - |
|
|||
|
|
| disabled | 是否禁用 | boolean | - | false | - |
|
|||
|
|
| disabled-color | 禁用的图标颜色 | string | - | linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%) | - |
|
|||
|
|
| allow-half | 是否允许半选 | boolean | - | false | 1.7.0 |
|
|||
|
|
| clearable | 是否允许再次点击后清除 | boolean | - | false | 1.13.0 |
|
|||
|
|
|
|||
|
|
## Events
|
|||
|
|
|
|||
|
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
|||
|
|
|---------|-----|-----|---------|
|
|||
|
|
| change | 点击icon，修改分值事件 | `{ value }` | - |
|
|||
|
|
|
|||
|
|
## 外部样式类
|
|||
|
|
|
|||
|
|
| 类名 | 说明 | 最低版本 |
|
|||
|
|
|-----|------|--------|
|
|||
|
|
| custom-class | 根节点样式 | - |
|