Rate 评分

使用指南

import { Rate } from 'fs-ui'
export default {
  components: {
    fsRate: Rate
  }
}
1
2
3
4
5
6

代码演示

基础用法

<fs-rate v-model="value"/>
1
export default {
  data () {
    return {
      value: 3
    }
  }
}
1
2
3
4
5
6
7

自定义图标

<fs-rate
  v-model="value"
  icon="heart-o"
  void-icon="heart"/>
1
2
3
4

自定义样式

<fs-rate
  v-model="value"
  :size="25"
  :count="6"
  color="#2ba"
  void-color="#ceefe8"/>
1
2
3
4
5
6

禁用

<fs-rate v-model="value" disabled/>
1

属性

参数 说明 类型 默认值
v-model 当前分值 Number -
count 图标总数 Number 5
disabled 是否禁用评分 String false
size 图标大小 (px) Number 20
icon 选中时的图标名称 String star
voidIcon 未选中时的图标名称 String star-o
color 选中时的颜色 String #ffd21e
voidColor 未选中时的颜色 String #c7c7c7
disabledColor 禁用时的颜色` String #bdbdbd

事件

event 说明 返回值
input input 事件 当前分值
change 当前分值变化时触发的事件 当前分值