@wines/rater

Rater 评分组件

对评价进行展示或对事物进行快速的评级操作。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Rater",
  "usingComponents": {
    "wux-cell": "@wines/cell",
    "wux-cell-group": "@wines/cell-group",
    "wux-rater": "@wines/rater"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">Rater</view>
		<view class="page__desc">评分组件</view>
	</view>
	<view class="page__bd">
		<wux-cell-group title="Normal Usage">
			<wux-cell title="Set default score = 5" hover-class="none">
				<wux-rater slot="footer" default-value="{{ 5 }}" />
			</wux-cell>
			<wux-cell title="Change color" hover-class="none">
				<wux-rater slot="footer" default-value="{{ 3 }}" active-color="#33cd5f" />
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="AllowHalf & AllowClear">
			<wux-cell title="AllowHalf = true" hover-class="none">
				<wux-rater slot="footer" allow-half default-value="{{ 2.5 }}" />
			</wux-cell>
			<wux-cell title="AllowClear = true" hover-class="none">
				<wux-rater
				 slot="footer"
				 allow-half
				 allow-clear
				 default-value="{{ 2.5 }}"
				/>
			</wux-cell>
			<wux-cell title="AllowTouchMove = true" hover-class="none">
				<wux-rater
				 slot="footer"
				 allow-half
				 allow-clear
				 allow-touch-move
				 default-value="{{ 2.5 }}"
				/>
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="Disabled = true">
			<wux-cell title="Your history score" hover-class="none">
				<wux-rater slot="footer" default-value="{{ 3 }}" disabled />
			</wux-cell>
			<wux-cell title="Decimal score 3.7" hover-class="none">
				<wux-rater slot="footer" default-value="{{ 3.7 }}" disabled />
			</wux-cell>
			<wux-cell title="Custom font-size(15px)" hover-class="none">
				<wux-rater
				 slot="footer"
				 default-value="{{ 3 }}"
				 font-size="{{ 15 }}"
				 disabled
				/>
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="Custom star">
			<wux-cell title="Loving" hover-class="none">
				<wux-rater
				 slot="footer"
				 default-value="{{ 3 }}"
				 margin="{{ 15 }}"
				 star="♡"
				/>
			</wux-cell>
			<wux-cell title="Sunshine" hover-class="none">
				<wux-rater
				 slot="footer"
				 default-value="{{ 3 }}"
				 margin="{{ 15 }}"
				 star="☼"
				/>
			</wux-cell>
			<wux-cell title="Smilies" hover-class="none">
				<wux-rater
				 slot="footer"
				 default-value="{{ 3 }}"
				 margin="{{ 15 }}"
				 star="☻"
				/>
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="Custom Icon">
			<wux-cell title="Loving" hover-class="none">
				<wux-rater
				 slot="footer"
				 default-value="{{ 3 }}"
				 margin="{{ 15 }}"
				 icon="ios-heart"
				/>
			</wux-cell>
			<wux-cell title="Sunshine" hover-class="none">
				<wux-rater
				 slot="footer"
				 default-value="{{ 3 }}"
				 margin="{{ 15 }}"
				 icon="ios-sunny"
				/>
			</wux-cell>
			<wux-cell title="Smilies" hover-class="none">
				<wux-rater
				 slot="footer"
				 default-value="{{ 3 }}"
				 margin="{{ 15 }}"
				 icon="ios-happy"
				/>
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="Custom text">
			<wux-cell title="Star" hover-class="none">
				<view slot="footer">
					<wux-rater controlled value="{{ value }}" bind:change="onChange" />
					<text class="wux-rater__text">{{ value }} stars</text>
				</view>
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="Set callback">
			<wux-cell title="How embarrass" hover-class="none">
				<wux-rater
				 slot="footer"
				 controlled
				 value="{{ value }}"
				 star="囧"
				 bind:change="onChange"
				/>
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="Controlled">
			<wux-cell title="Very good" hover-class="none">
				<wux-rater
				 slot="footer"
				 controlled
				 value="{{ slider }}"
				 star="屌"
				 bind:change="sliderChange"
				/>
			</wux-cell>
			<wux-cell hover-class="none">
				<slider
				 value="{{ slider }}"
				 show-value
				 min="0"
				 max="5"
				 bindchange="sliderChange"
				/>
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="Set callback">
			<block wx:for="{{ items }}" wx:key="index">
				<wux-cell title="{{ item.text }}" hover-class="none">
					<wux-rater slot="footer" default-value="{{ item.value }}" />
				</wux-cell>
			</block>
		</wux-cell-group>
	</view>
</view>

import './index.less';

Page({
  data: {
    items: [
      {
        id: '001',
        text: 'Face',
        value: 1,
      },
      {
        id: '002',
        text: 'Eye',
        value: 2,
      },
    ],
    slider: 0,
    value: 3,
  },
  sliderChange(e) {
    this.setData({
      slider: e.detail.value,
    });
  },
  onChange(e) {
    this.setData({
      value: e.detail.value,
    });
    console.log(e);
  },
});

API

Rater props

参数	类型	描述	默认值
prefixCls	string	自定义类名前缀	wux-rater
max	number	最大值	5
icon	string	图标名称，优先级高于 star	-
star	string	图标	★
defaultValue	number	默认值，当 controlled 为 false 时才生效	0
value	number	当前数，当 controlled 为 true 时才生效	0
activeColor	string	图标激活的颜色	#ffc900
margin	number	图标外边距	2
fontSize	number	图标大小	25
disabled	boolean	禁用点击	false
allowHalf	boolean	是否允许半选	false
allowClear	boolean	是否允许再次点击后清除	false
allowTouchMove	boolean	是否允许触摸移动选中	false
controlled	boolean	是否受控 说明文档	false
bind:change	function	点击事件的回调函数	-

Rater externalClasses

名称	描述
wux-class	根节点样式类