Rate评分

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.    "vtu-rate": "/miniprogram_npm/vtuweapp/rate/vtu-rate"
    3. }
    4.

    代码演示

    基础用法

    1. <vtu-rate value="{{value1}}" count="5"  bind:change="bindChange"></vtu-rate>
    3. Page({
    4.   data: {
    5.     value1: 3
    6.   },
    8.   bindChange: function(e) {
    9.     this.setData({
    10.       value1: e.detail.value
    11.     })
    12.   }
    13. });
    14.

    自定义图标

    1. <vtu-rate value="{{value1}}" count="5" size="24px" icon="iconfont icon-xihuan" active-icon="icon-xihuanfill iconfont " bind:change="bindChange"></vtu-rate>
    2.

    自定义颜色

    1. <vtu-rate value="{{value1}}" count="5" size="24px" active-color="red" bind:change="bindChange"></vtu-rate>
    2.

    自定义大小

    1. <vtu-rate value="{{value1}}" count="5" size="16px"  bind:change="bindChange"></vtu-rate>
    2.

    自定义数量

    1. <vtu-rate value="{{value1}}" count="8" size="24px"  bind:change="bindChange"></vtu-rate>
    2.

    异步处理

    1. <vtu-rate value="{{value1}}" count="5" size="24px" async-change="true" bind:change="bindAsyncChange"></vtu-rate>
    3. Page({
    4.   data: {
    5.     value1: 3
    6.   },
    8.   bindAsyncChange: function(e) {
    9.     let self = this
    10.     wx.showLoading({
    11.       title: '处理中...'
    12.     })
    13.     setTimeout(function() {
    14.       self.setData({
    15.         value1: e.detail.value
    16.       })
    17.       wx.hideLoading();
    18.     }, 2000)
    19.   }
    20. });
    21.

    禁用状态

    <vtu-rate value="{{value1}}" count="5" size="24px" disabled></vtu-rate>

    只读状态

    <vtu-rate value="{{value1}}" count="5" size="24px" readonly></vtu-rate>

    组件参数

    Props

    参数说明类型默认值必填
    value评分值Number0否
    size图标尺寸大小String20px否
    count图标总数Number5否
    color图标颜色String-否
    active-color激活时图标颜色String-否
    icon图标String内置图标否
    activeIcon激活时图标String-否
    readonly是否只读Booleanfalse否
    disabled是否禁用Booleanfalse否
    asyncChange是否异步Booleanfalse否

    Events

    方法名说明返回值
    bind:change评分选中时事件event.detail = {value: value}， index为当前选择评分数

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Rate 评分 - 图1