Rate 评分
优质
小牛编辑
131浏览
2023-12-01
介绍
用于对事物进行评级操作。
引入
import { createApp } from 'vue';
import { Rate } from 'vant';
const app = createApp();
app.use(Rate);
代码演示
基础用法
<van-rate v-model="value" />
export default {
data() {
return {
value: 3,
};
},
};
自定义图标
<van-rate v-model="value" icon="like" void-icon="like-o" />
自定义样式
<van-rate
v-model="value"
:size="25"
color="#ffd21e"
void-icon="star"
void-color="#eee"
/>
半星
<van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />
export default {
data() {
return {
value: 2.5,
};
},
};
自定义数量
<van-rate v-model="value" :count="6" />
禁用状态
<van-rate v-model="value" disabled />
只读状态
<van-rate v-model="value" readonly />
监听 change 事件
<van-rate v-model="value" @change="onChange" />
export default {
method: {
onChange(value) {
Toast('当前值:' + value);
},
},
};
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 | 选中时的图标名称或图片链接 | string | star |
void-icon | 未选中时的图标名称或图片链接 | string | star-o |
icon-prefix v2.5.3 | 图标类名前缀,同 Icon 组件的 class-prefix 属性 | string | van-icon |
allow-half | 是否允许半选 | boolean | false |
readonly | 是否为只读状态 | boolean | false |
disabled | 是否禁用评分 | boolean | false |
touchable | 是否可以通过滑动手势选择评分 | boolean | true |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 当前分值变化时触发的事件 | 当前分值 |