Press UI

# Rate 评分

用于对事物进行评级操作。

# 引入

import PressRate from 'press-ui/press-rate/press-rate';

export default {
  components: {
    PressRate,
  }
}

# 代码演示

# 基础用法

<press-rate :value="value" @change="onChange" />

export default {
  data() {
    return {
      value: 3,
    }
  },
  methods: {
    onChange(value) {
      console.log('value', value);
    }
  },
};

# 自定义图标

<press-rate
  :value="value"
  icon="like"
  void-icon="like-o"
  @change="onChange"
/>

# 自定义样式

<press-rate
  :value="value"
  :size="25"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
  @change="onChange"
/>

# 半星

<press-rate
  :value="value"
  allow-half
  void-icon="star"
  void-color="#eee"
  @change="onChange"
/>

export default {
  data() {
    return {
      value: 2.5,
    }
  },
  methods: {
    onChange(value) {
      console.log('value', value);
    }
  },
};

# 自定义数量

<press-rate :value="value" :count="6" @change="onChange" />

# 禁用状态

<press-rate disabled :value="value" @change="onChange" />

# 只读状态

<press-rate readonly :value="value" @change="onChange" />

# API

# Props

参数 说明 类型 默认值
name 在表单内提交时的标识符 string -
value 当前分值 number -
count 图标总数 number 5
size 图标大小，默认单位为 px string | number 20px
gutter 图标间距，默认单位为 px string | number 4px
color 选中时的颜色 string #ffd21e
void-color 未选中时的颜色 string #c7c7c7
icon 选中时的图标名称或图片链接，可选值见 Icon 组件 string star
void-icon 未选中时的图标名称或图片链接，可选值见 Icon 组件 string star-o
allow-half 是否允许半选 boolean false
readonly 是否为只读状态 boolean false
disabled 是否禁用评分 boolean false
disabled-color 禁用时的颜色 string #bdbdbd
touchable 是否可以通过滑动手势选择评分 boolean true
custom-class 根节点样式类 string -
icon-class 图标样式类 string -

# Events

事件名称 说明 回调参数
@change 当前分值变化时触发的事件 event.detail:当前分值

# 在线调试

横屏

← Search →