Rate 评分

概述

对事物进行快速的评级操作,或对评价进行展示。

代码示例

Rate 评分 - 图1

基础用法

基本用法。

  1. <template>
  2. <Rate v-model="value" />
  3. </template>
  4. <script>
  5. export default {
  6. data () {
  7. return {
  8. value: 0
  9. }
  10. }
  11. }
  12. </script>

Rate 评分 - 图2

半星

设置属性 allow-half 可以选中半星。

  1. <template>
  2. <Rate allow-half v-model="valueHalf" />
  3. </template>
  4. <script>
  5. export default {
  6. data () {
  7. return {
  8. valueHalf: 2.5
  9. }
  10. }
  11. }
  12. </script>

Rate 评分 - 图3

显示提示

设置属性 show-text 可以显示提示文字。

提示内容也可以通过 slot 自定义。

  1. <template>
  2. <Row>
  3. <Col span="12">
  4. <Rate show-text v-model="valueText" />
  5. </Col>
  6. <Col span="12">
  7. <Rate show-text allow-half v-model="valueCustomText">
  8. <span style="color: #f5a623">{{ valueCustomText }}</span>
  9. </Rate>
  10. </Col>
  11. </Row>
  12. </template>
  13. <script>
  14. export default {
  15. data () {
  16. return {
  17. valueText: 3,
  18. valueCustomText: 3.8
  19. }
  20. }
  21. }
  22. </script>

Rate 评分 - 图4

只读

设置属性 disabled 开启只读模式,无法交互。

  1. <template>
  2. <Rate disabled v-model="valueDisabled" />
  3. </template>
  4. <script>
  5. export default {
  6. data () {
  7. return {
  8. valueDisabled: 2
  9. }
  10. }
  11. }
  12. </script>

Rate 评分 - 图5

清除

支持允许或者禁用清除。

  1. <template>
  2. <Rate clearable v-model="value1" /> clearable: true
  3. <Rate v-model="value2" /> clearable: false
  4. </template>
  5. <script>
  6. export default {
  7. data () {
  8. return {
  9. value1: 3,
  10. value2: 3
  11. }
  12. }
  13. }
  14. </script>

Rate 评分 - 图6

自定义字符或图标

设置 character 属性,可以自定义字符。

设置 iconcustom-icon 属性,可以自定义图标。

  1. <template>
  2. <Rate v-model="value3" character="A" />
  3. <Rate v-model="value4" character="好" />
  4. <Rate v-model="value5" icon="ios-heart" />
  5. </template>
  6. <script>
  7. export default {
  8. data () {
  9. return {
  10. value3: 3,
  11. value4: 3,
  12. value5: 3
  13. }
  14. }
  15. }
  16. </script>

API

Rate props

属性 说明 类型 默认值
count star 总数 Number 5
value 当前 star 数,可以使用 v-model 双向绑定数据 Number 0
allow-half 是否允许半选 Boolean false
disabled 是否只读,无法进行交互 Boolean false
show-text 是否显示提示文字 Boolean false
clearable 是否可以取消选择 Boolean false
character 自定义字符 String -
icon 使用图标 String -
custom-icon 使用自定义图标 String -

Rate events

事件名 说明 返回值
on-change 评分改变时触发 value