Rate

星级评分。

Rate - 图1

引入

  1. import mpRate from 'mpvue-weui/src/rate';
  2. export default {
  3.   components: {
  4.     mpRate,
  5.   },
  6. }

使用

  1. <!-- 默认状态 -->
  2. <mp-rate rateValue=3 @rateClick="rateClick"></mp-rate>
  4. <!-- 通过自定义 class 改变 rate 组件大小 -->
  5. <mp-rate rateValue=4.5 rateClass="weui-rate-20"></mp-rate>
  7. <!-- 支持点击 -->
  8. <mp-rate rateValue=4.5 @rateClick="rateClick" :isSupportClick=true></mp-rate>
  1. export default {
  2.   data() {
  3.     return {
  4.       rateScoreText: '',
  5.       rateScoreDesc: ['非常不满意，各方面都很差', '不满意，比较差', '一般，还需改善', '比较满意，仍可改善', '非常满意,无可挑剔']
  6.     };
  7.   },
  8.   // some code
  9.   methods: {
  10.     rateClick(index) {
  11.       this.rateScoreText = this.rateScoreDesc[index];
  12.     }
  13.   }
  14. };

API

参数说明类型默认值
rateRange需要展示星星的个数(整数)Number5
rateValue评分的值，支持小数Number0
rateClass评分组件自定义 class,一般用于改变组件大小String-
isSupportClick是否支持点击Booleanfalse

TIP

rateClass 设置的 class 需要写在全局样式中，如果写在单个模板的样式里面，那么不要给 <style></style> 加 scoped属性。

Event

事件名说明参数
@rateClick点击评分组件时触发，返回点击组件的索引值index

TIP

该功能一般用于点击评分，根据返回的 index 来显示对应的文案。