# Cube-Rate
# 示例
# 基本用法
<template>
<view>
<cube-rate wx:model="{{value}}" wx:model-prop="value" max="{{max}}" />
</view>
</template>
<script>
import { createComponent } from '@mpxjs/core'
createComponent({
data() {
return {
value: false,
max: 3
}
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 多项配置
例如，使用disabled使评分组件只读，使用max自定义评分等级，使用 justify 决定是否自动适应容器宽度，使用allowHalf代表是否需要半星 。
<template>
<view>
<cube-rate
wx:model="{{value}}"
wx:model-prop="value"
max="{{max}}"
justify="{{justify}}"
disabled="{{disabled}}"
allowHalf="{{allowHalf}}"
/>
</view>
</template>
<script>
import { createComponent } from '@mpxjs/core'
createComponent({
data() {
return {
value: false,
max: 3,
justify: true,
disabled: true,
allowHalf: true
}
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 自定义星星样式
需要使用cube-rate-item组件，并且对自定义的星星元素定义两种样式——普通和活跃（在.cube-rate-item_active类之下, 如设置半星则也需修改.cube-rate-item_half_active类）
# 注意
使用自定义插槽时，因微信与支付宝在wx:for以数字为参数时，起始索引不同，为避免此问题请在wx:for遍历生成cube-rate-item时以数组为参数。
<template>
<view>
<cube-rate
wx:model="{{value}}"
wx:model-prop="value"
isCustomize="{{customize}}"
max="{{max}}"
>
<cube-rate-item
wx:for="{{maxArray}}"
wx:key="item"
index="{{item}}"
value="{{value}}"
>
<view class="cube-rate-item-demo"></view>
</cube-rate-item>
</cube-rate>
</view>
</template>
<script>
import { createComponent } from '@mpxjs/core'
createComponent({
data() {
return {
value: false,
max: 3,
customize: true
}
},
computed: {
maxArray() {
return Array.from({ length: this.max }, (_, index) => index + 1)
}
}
})
</script>
<style lang="stylus">
.rate-item-demo
width: 100%
height: 100%
background-size: 100%
background-color: grey
.cube-rate-item_active
.cube-rate-item-demo
background-color: orange
.cube-rate-item_half_active
.cube-rate-item-demo
background-color: blue
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# cube-rate-item 的插槽
| 名字 | 说明 | 作用域参数 |
|---|---|---|
| default | 自定义星星元素 | - |
# Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 双向绑定属性值 | Number | - | 0 |
| max | 星星个数 | Number | - | 0 |
| disabled | 是否禁止 | Boolean | true/false | false |
| justify | 是否自适应容器宽度（通过在星星之间增加空隙） | Boolean | true/false | false |
| allowHalf | 是否支持半选 | Boolean | true/false | false |
| isCustomize | 是否需要自定义插槽 | Boolean | true/false | false |
# Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| input | 当手指离开屏幕时触发 | - |
# Slots
| 插槽名 | 说明 |
|---|---|
| — (默认插槽) | 自定义内容 |
# CSS Variable
| 变量名 | 默认值 | 含义 |
|---|---|---|
| $rate-max-width | 100% | 最大宽度 |
| $rate-justify-width | 100% | 均匀分布时宽度 |
| $rate-item-width | 32px | 星星容器宽度 |
| $rate-item-def-width | 100% | 星星宽度 |
| $rate-item-def-height | 100% | 星星高度 |
| $rate-item-def-background-size | 100% | 背景图尺寸 |
| $rate-item-flex | 0 1 auto | flex布局 |
| $rate-item-margin-right | 6px | 左边距 |
| $rate-item-after-padding | 50% 0 | 伪元素padding |
| $rate-item-star-default | url('data:image/png;base64,iVB... | 默认全星图 |
| $rate-item-star-active | url('data:image/png;base64,iVB... | 活跃全星图 |
| $rate-item-star-half-active | url('data:image/png;base64,iVB... | 半星活跃全星图 |