用于对事物进行评级操作。
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
import { createApp } from "vue";
import { Rate } from "vant";
const app = createApp();
app.use(Rate);
通过 v-model
来绑定当前评分值。
<van-rate v-model="value" />
import { ref } from "vue";
export default {
setup() {
const value = ref(3);
return { value };
},
};
通过 icon
属性设置选中时的图标,void-icon
属性设置未选中时的图标。
<van-rate v-model="value" icon="like" void-icon="like-o" />
通过 size
属性设置图标大小,color
属性设置选中时的颜色,void-color
设置未选中时的颜色。
<van-rate
v-model="value"
:size="25"
color="#ffd21e"
void-icon="star"
void-color="#eee"
/>
设置 allow-half
属性后可以选中半星。
<van-rate v-model="value" allow-half />
import { ref } from "vue";
export default {
setup() {
const value = ref(2.5);
return { value };
},
};
通过 count
属性设置评分总数。
<van-rate v-model="value" :count="6" />
通过 disabled
属性来禁用评分。
<van-rate v-model="value" disabled />
通过 readonly
属性将评分设置为只读状态。
<van-rate v-model="value" readonly />
设置 readonly
和 allow-half
属性后,Rate 组件可以展示任意小数结果。
<van-rate v-model="value" readonly allow-half />
import { ref } from "vue";
export default {
setup() {
const value = ref(3.3);
return { value };
},
};
评分变化时,会触发 change
事件。
<van-rate v-model="value" @change="onChange" />
import { ref } from "vue";
import { showToast } from "vant";
export default {
setup() {
const value = ref(3);
const onChange = (value) => showToast("当前值:" + value);
return {
value,
onChange,
};
},
};
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
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 | 是否允许半选 | boolean | false
|
readonly | 是否为只读状态,只读状态下无法修改评分 | boolean | false
|
disabled | 是否禁用评分 | boolean | false
|
touchable | 是否可以通过滑动手势选择评分 | boolean | true
|
事件名 | 说明 | 回调参数 |
---|---|---|
change | 当前分值变化时触发的事件 | currentValue: number |
组件导出以下类型定义:
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) | - |
介绍在右上角展示徽标数字或小红点。引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { createApp } from ...
介绍用于标记关键词和概括主要内容。引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { createApp } from ...
介绍Vant 是基于有赞Zan Design System视觉规范实现的组件库,在这里可以下载 Vant 的设计资源。设计稿组件设计稿(Sketch)包含...
介绍日历组件用于选择日期或日期区间。实例演示引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { createA...
介绍用户可以在文本框内输入或编辑文字。实例演示引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { creat...
介绍建立父子组件之间的关联关系,进行数据通信和方法调用,基于provide和inject实现。代码演示基本用法在父组件中使用useChildr...
介绍用于搜索场景的输入框组件。实例演示引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { createApp } f...