1.5.1 • Published 1 year ago
@wines/rater v1.5.1
@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 | 根节点样式类 |