Rate 评分 - Vant 4

⭐ Rate 评分

🎯 介绍

Rate 组件用于对事物进行评级操作，支持自定义图标、颜色、半星、禁用等能力，常用于内容评分或用户反馈场景。

📦 引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from'vue'; import { Rate } from'vant'; const app = createApp(); app.use(Rate);

🎯 代码演示

⭐ 基础用法

最简单的评分组件，通过 v-model 双向绑定当前评分值，让用户轻松表达满意度！

html

<template>
  <div class="demo-rate">
    <van-rate v-model="value" />
    <p>当前评分：{{ value }} 星</p>
  </div>
</template>

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(3);
    return { value };
  },
};

🎨 自定义图标

不想用星星？试试爱心、笑脸或任何你喜欢的图标！通过 icon 和 void-icon 属性打造独特的评分体验。

html

<template>
  <div class="demo-rate">
    <!-- 爱心评分 -->
    <van-rate v-model="heartValue" icon="like" void-icon="like-o" />
    <p>爱心评分：{{ heartValue }}</p>
    
    <!-- 笑脸评分 -->
    <van-rate v-model="smileValue" icon="smile" void-icon="smile-o" />
    <p>笑脸评分：{{ smileValue }}</p>
  </div>
</template>

import { ref } from 'vue';

export default {
  setup() {
    const heartValue = ref(3);
    const smileValue = ref(4);
    return { heartValue, smileValue };
  },
};

🌈 自定义样式

通过 size、color、void-color 属性自定义评分组件的外观，让它完美融入你的设计风格！

html

<template>
  <div class="demo-rate">
    <!-- 大号金色星星 -->
    <van-rate v-model="largeValue" size="30" color="#ffd21e" void-color="#eee" />
    <p>大号评分：{{ largeValue }}</p>
    
    <!-- 小号红色星星 -->
    <van-rate v-model="smallValue" size="15" color="#ff4444" />
    <p>小号评分：{{ smallValue }}</p>
  </div>
</template>

import { ref } from 'vue';

export default {
  setup() {
    const largeValue = ref(4);
    const smallValue = ref(3);
    return { largeValue, smallValue };
  },
};

✨ 半星评分

支持半星评分，让用户的评价更加精准！设置 allow-half 属性即可开启这个贴心功能。

html

<template>
  <div class="demo-rate">
    <van-rate v-model="halfValue" allow-half />
    <p>精确评分：{{ halfValue }} 星</p>
  </div>
</template>

import { ref } from 'vue';

export default {
  setup() {
    const halfValue = ref(2.5);
    return { halfValue };
  },
};

🔢 自定义数量

不止5颗星！通过 count 属性设置任意数量的评分等级，满足不同的评分需求。

html

<template>
  <div class="demo-rate">
    <!-- 10分制评分 -->
    <van-rate v-model="tenValue" :count="10" />
    <p>十分制评分：{{ tenValue }}/10</p>
    
    <!-- 3分制评分 -->
    <van-rate v-model="threeValue" :count="3" />
    <p>三分制评分：{{ threeValue }}/3</p>
  </div>
</template>

import { ref } from 'vue';

export default {
  setup() {
    const tenValue = ref(7);
    const threeValue = ref(2);
    return { tenValue, threeValue };
  },
};

🧹 可清空评分

开启 clearable 属性后，再次点击相同的星星可以清空评分，给用户更多选择的自由！

html

<template>
  <div class="demo-rate">
    <van-rate v-model="clearableValue" clearable />
    <p>{{ clearableValue ? `当前评分：${clearableValue}` : '暂无评分' }}</p>
  </div>
</template>

import { ref } from 'vue';

export default {
  setup() {
    const clearableValue = ref(3);
    return { clearableValue };
  },
};

🚫 禁用状态

通过 disabled 属性禁用评分功能，适用于展示历史评分或权限受限的场景。

html

<template>
  <div class="demo-rate">
    <van-rate v-model="disabledValue" disabled />
    <p>禁用状态评分：{{ disabledValue }}</p>
  </div>
</template>

import { ref } from 'vue';

export default {
  setup() {
    const disabledValue = ref(3);
    return { disabledValue };
  },
};

👁️ 只读状态

通过 readonly 属性将评分设置为只读，完美展示评分结果而不允许修改。

html

<template>
  <div class="demo-rate">
    <van-rate v-model="readonlyValue" readonly />
    <p>只读评分：{{ readonlyValue }}</p>
  </div>
</template>

import { ref } from 'vue';

export default {
  setup() {
    const readonlyValue = ref(4);
    return { readonlyValue };
  },
};

🎯 精确小数显示

结合 readonly 和 allow-half 属性，可以展示任意精度的评分结果，完美呈现复杂的评分数据！

html

<template>
  <div class="demo-rate">
    <van-rate v-model="preciseValue" readonly allow-half />
    <p>精确评分：{{ preciseValue }}</p>
  </div>
</template>

import { ref } from 'vue';

export default {
  setup() {
    const preciseValue = ref(3.7);
    return { preciseValue };
  },
};

📡 监听变化事件

通过监听 change 事件，实时响应用户的评分操作，提供即时反馈！

html

<template>
  <div class="demo-rate">
    <van-rate v-model="eventValue" @change="onChange" />
    <p>实时评分：{{ eventValue }}</p>
  </div>
</template>

javascript

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const eventValue = ref(3);
    
    const onChange = (value) => {
      showToast(`您给出了 ${value} 星评价！`);
    };
    
    return { 
      eventValue, 
      onChange 
    };
  },
};

📋 API

🔧 Props

参数	说明	类型	默认值
v-model	🎯 当前分值，双向绑定的评分数据	number	-
count	🔢 图标总数，设置评分的最大等级	number \| string	`5`
size	📏 图标大小，支持数字或字符串，默认单位为 `px`	number \| string	`20px`
gutter	📐 图标间距，控制星星之间的距离，默认单位为 `px`	number \| string	`4px`
color	🎨 选中时的颜色，让高分评价更加醒目	string	`#ee0a24`
void-color	🌫️ 未选中时的颜色，低调展示未激活状态	string	`#c8c9cc`
disabled-color	🚫 禁用时的颜色，视觉上表明不可操作状态	string	`#c8c9cc`
icon	⭐ 选中时的图标名称或图片链接，等同于 Icon 组件的 name 属性	string	`star`
void-icon	☆ 未选中时的图标名称或图片链接，等同于 Icon 组件的 name 属性	string	`star-o`
icon-prefix	🏷️ 图标类名前缀，等同于 Icon 组件的 class-prefix 属性	string	`van-icon`
allow-half	✨ 是否允许半选，开启后支持 0.5 星精度	boolean	`false`
clearable `v4.6.0`	🧹 是否允许再次点击后清除，提供重置评分的便利	boolean	`false`
readonly	👁️ 是否为只读状态，只读状态下无法修改评分	boolean	`false`
disabled	🔒 是否禁用评分，禁用后无法进行任何操作	boolean	`false`
touchable	👆 是否可以通过滑动手势选择评分，移动端友好交互	boolean	`true`

📡 Events

事件名	说明	回调参数
change	🔄 当前分值变化时触发的事件，实时响应用户操作	currentValue: number

📝 类型定义

组件导出以下类型定义，为 TypeScript 用户提供完整的类型支持：

import type { RateProps } from 'vant';

🎨 主题定制

🎭 样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--van-rate-icon-size	20px	📏 评分图标的大小，控制星星的尺寸
--van-rate-icon-gutter	var(--van-padding-base)	📐 评分图标之间的间距，调整星星的排列密度
--van-rate-icon-void-color	var(--van-gray-5)	🌫️ 未选中图标的颜色，营造低调的视觉效果
--van-rate-icon-full-color	var(--van-danger-color)	⭐ 选中图标的颜色，突出显示用户的评分
--van-rate-icon-disabled-color	var(--van-gray-5)	🚫 禁用状态图标的颜色，视觉上表明不可操作

📚 相关文档

🎨 基础组件

Icon 图标 - 🎯 图标组件，Rate 组件的视觉基础，支持自定义评分图标
Button 按钮 - 🔘 按钮组件，常与评分组件搭配使用，如提交评分
Cell 单元格 - 📱 单元格组件，在列表中展示评分信息的理想选择

🔗 表单组件

Form 表单 - 📋 表单组件，评分作为表单项的完美集成方案
Field 输入框 - ✏️ 输入框组件，与评分组件组合收集用户反馈
Checkbox 复选框 - ☑️ 复选框组件，多选评价场景的补充选择
Radio 单选框 - ⚪ 单选框组件，固定选项评价的经典方案

💬 反馈组件

Toast 轻提示 - 💬 轻提示组件，评分操作后的即时反馈提示
Dialog 弹出框 - 📋 弹出框组件，详细评价表单的承载容器
Notify 消息通知 - 📢 消息通知组件，重要评分结果的醒目提醒
ActionSheet 动作面板 - 📋 动作面板组件，评分相关操作的集中展示

🎯 选择器组件

Picker 选择器 - 🎡 选择器组件，复杂评分维度的滚轮选择方案
Slider 滑块 - 🎚️ 滑块组件，连续评分值的直观操作体验
Stepper 步进器 - ➕ 步进器组件，精确数值评分的便捷输入

🛠️ 工具组件

ConfigProvider 全局配置 - ⚙️ 全局配置组件，统一定制评分组件的主题样式
Popup 弹出层 - 🎭 弹出层组件，评分详情页面的优雅展示方案

⭐ Rate 评分 ​

🎯 介绍 ​

📦 引入 ​

🎯 代码演示 ​

⭐ 基础用法 ​

🎨 自定义图标 ​

🌈 自定义样式 ​

✨ 半星评分 ​

🔢 自定义数量 ​

🧹 可清空评分 ​

🚫 禁用状态 ​

👁️ 只读状态 ​

🎯 精确小数显示 ​

📡 监听变化事件 ​

📋 API ​

🔧 Props ​

📡 Events ​

📝 类型定义 ​

🎨 主题定制 ​

🎭 样式变量 ​

📚 相关文档 ​

🎨 基础组件 ​

🔗 表单组件 ​

💬 反馈组件 ​

🎯 选择器组件 ​

🛠️ 工具组件 ​

⭐ Rate 评分

🎯 介绍

📦 引入

🎯 代码演示

⭐ 基础用法

🎨 自定义图标

🌈 自定义样式

✨ 半星评分

🔢 自定义数量

🧹 可清空评分

🚫 禁用状态

👁️ 只读状态

🎯 精确小数显示

📡 监听变化事件

📋 API

🔧 Props

📡 Events

📝 类型定义

🎨 主题定制

🎭 样式变量

📚 相关文档

🎨 基础组件

🔗 表单组件

💬 反馈组件

🎯 选择器组件

🛠️ 工具组件