VEUI

VEUI on GitHub
Play!EnglishEN
⌘ K | 全文搜索…

Rating 评分

示例

可编辑

用户可以通过交互设置评分。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-rating v-model="value"/>
</article>
</template>

<script>
import { Rating } from 'veui'

export default {
  components: {
    'veui-rating': Rating
  },
  data () {
    return {
      value: 4
    }
  }
}
</script>

纯展示

设置 readonly 属性为 true 来展示已有的评分。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-rating
    v-model="value"
    readonly
  />
</article>
</template>

<script>
import { Rating } from 'veui'

export default {
  components: {
    'veui-rating': Rating
  },
  data () {
    return {
      value: 4
    }
  }
}
</script>

评分项数

设置 max 属性值来指定最多展示的评分符号。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-rating
    v-model="value"
    :max="3"
  />
</article>
</template>

<script>
import { Rating } from 'veui'

export default {
  components: {
    'veui-rating': Rating
  },
  data () {
    return {
      value: 2
    }
  }
}
</script>

可清除

设置 clearable 属性为 true 来允许用户通过点击已选评分项来取消选择。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-rating
    v-model="value"
    clearable
  />
</article>
</template>

<script>
import { Rating } from 'veui'

export default {
  components: {
    'veui-rating': Rating
  },
  data () {
    return {
      value: 4
    }
  }
}
</script>

说明文本

设置 labels 属性值来指定每个评分符号对应的说明文本。label-position 属性值可以指定说明文本是内联展示，还是通过浮层提示展示。

label-position="inline" (default)

label-position="popup"

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <h4><code>label-position="inline"</code> (default)</h4>
    <veui-rating
      v-model="value"
      :labels="labels"
    />
  </section>
  <section>
    <h4><code>label-position="popup"</code></h4>
    <veui-rating
      v-model="value"
      :labels="labels"
      label-position="popup"
    />
  </section>
</article>
</template>

<script>
import { Rating } from 'veui'

export default {
  components: {
    'veui-rating': Rating
  },
  data () {
    return {
      value: 4,
      labels: {
        1: '非常不满意',
        2: '不满意',
        3: '一般',
        4: '满意',
        5: '非常满意'
      }
    }
  }
}
</script>

半星

设置 allow-half 属性为 true 来允许半星评分。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-rating
    v-model="value"
    allow-half
  />
</article>
</template>

<script>
import { Rating } from 'veui'

export default {
  components: {
    'veui-rating': Rating
  },
  data () {
    return {
      value: 4
    }
  }
}
</script>

自定义

使用 symbol 插槽来自定义评星项目的符号。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-rating v-model="value">
    <template #symbol>
      赞
    </template>
  </veui-rating>
</article>
</template>

<script>
import { Rating } from 'veui'

export default {
  components: {
    'veui-rating': Rating
  },
  data () {
    return {
      value: 4
    }
  }
}
</script>

API

属性

名称类型默认值描述
maxnumber5最多展示的评分项个数，只能设置为整数。
valuenumber-

v-model

已选的评分分数。范围为从 1 到 max 属性值。

readonlybooleanfalse是否为只读状态。
clearablebooleanfalse是否允许清除已选评分项。
allow-halfbooleanfalse是否允许半星评分。
labelsRecord<number, string>-每个评分符号对应的说明文本。
label-position'inline' | 'popup''inline'说明文本的展示方式，inline 则内联展示，popup 则通过悬浮提示展示。

插槽

名称描述
symbol

每个评分项的符号区域。

默认内容：展示星星符号。

名称类型描述
valuenumber当前符号对应的评分。
label

每个评分项的符号区域。

默认内容：labels 中指定的每个评分对应的说明文本。

名称类型描述
valuenumber当前符号对应的评分。

事件

名称描述
change

v-model

评分状态变化后触发，回调参数为 (value: number)。value 为当前已选的评分分数。

自定义样式

名称类型默认值描述
--dls-rating-symbol-gap<length>-评分项的间距。
--dls-rating-label-spacing<length>-说明文本与评分项之间的间距。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024