Skip to content

Feat rate rn #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
likecodeboys wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Feat rate rn #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
45dc934
feat: rate适配rn
Jun 9, 2025
0f9d33b
feat: 修改文档、demo以及单侧
likecodeboys Jun 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/guide/design-tokens.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
|<span id="color-secondary" class="css-var-name">$color-secondary</span>|<div>#4F5E83</div>|基础-次要颜色|
|<span id="color-disabled" class="css-var-name">$color-disabled</span>|<div>#ccc</div>|基础-禁用色|
|<span id="color-dark-grey" class="css-var-name">$color-dark-grey</span>|<div>#333</div>|基础-灰色|
|<span id="color-dark-grey-s" class="css-var-name">$color-dark-grey-s</span>|<div>#323233</div>|基础-浅灰|
|<span id="color-dark-grey-s" class="css-var-name">$color-dark-grey-s</span>|<div>#000000</div>|-|
|<span id="color-light-grey-opacity" class="css-var-name">$color-light-grey-opacity</span>|<div>rgba(0, 0, 0, .04)</div>|基础-透明灰|
|<span id="mask-bgc_opacity" class="css-var-name">$mask-bgc_opacity</span>|<div>rgba(37, 38, 45, 0.4)</div>|遮罩层背景|
|<span id="fill-bgc" class="css-var-name">$fill-bgc</span>|<div>#f2f2f2</div>|基础-填充背景色|
Expand Down
6 changes: 3 additions & 3 deletions example/pages/rate/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@

### 自定义星星样式

需要使用cube-rate-item组件，并且对自定义的星星元素定义两种样式——普通和活跃（在.cube-rate-item_active类之下, 如设置半星则也需修改.cube-rate-item_half_active类）
需要使用cube-rate-item组件，并且对自定义的星星元素定义两种样式——普通和活跃（在.cube-rate-item-def-active类之下, 如设置半星则也需修改.cube-rate-item-def-half-active类）
#### 注意
使用自定义插槽时，因微信与支付宝在wx:for以数字为参数时，起始索引不同，为避免此问题请在wx:for遍历生成cube-rate-item时以数组为参数。

Expand Down Expand Up @@ -141,10 +141,10 @@
height: 100%
background-size: 100%
background-color: grey
.cube-rate-item_active
.cube-rate-item-def-active
.cube-rate-item-demo
background-color: orange
.cube-rate-item_half_active
.cube-rate-item-def-half-active
.cube-rate-item-demo
background-color: blue
</style>
Expand Down
4 changes: 2 additions & 2 deletions example/pages/rate/index.mpx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,10 +184,10 @@
.desc
margin-top 15px

.cube-rate-item_active
.cube-rate-item-def-active
.cube-rate-item-demo
background-color: orange
.cube-rate-item_half_active
.cube-rate-item-def-half-active
.cube-rate-item-demo
background-color: blue
</style>
Expand Down
8 changes: 4 additions & 4 deletions packages/mpx-cube-ui/__tests__/components/rate/__snapshots__/rate.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`component rate unit test correct props check matchSnapshot 1`] = `"<wx-view class=\\"main--cube-rate\\"><rate-item><wx-view class=\\"rate-item--cube-rate-item rate-item--cube-rate-item_active\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item rate-item--cube-rate-item_half_active\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item></wx-view>"`;
exports[`component rate unit test correct props check matchSnapshot 1`] = `"<wx-view class=\\"main--cube-rate\\"><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def rate-item--cube-rate-item-def-active\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def rate-item--cube-rate-item-def-half-active\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item></wx-view>"`;

exports[`component rate unit test event trigger check matchSnapshot 1`] = `"<wx-view class=\\"main--rate-demo\\"><wx-view>当前分数的值: 1</wx-view><rate data-eventconfigs=\\"[object Object]\\"><wx-view class=\\"rate--cube-rate\\"><rate-item><wx-view class=\\"rate-item--cube-rate-item rate-item--cube-rate-item_active\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item></wx-view></rate></wx-view>"`;
exports[`component rate unit test event trigger check matchSnapshot 1`] = `"<wx-view class=\\"main--rate-demo\\"><wx-view>当前分数的值: 1</wx-view><rate data-eventconfigs=\\"[object Object]\\"><wx-view class=\\"rate--cube-rate\\"><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def rate-item--cube-rate-item-def-active\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item></wx-view></rate></wx-view>"`;

exports[`component rate unit test slot check matchSnapshot 1`] = `"<wx-view class=\\"main--rate-page\\"><rate data-eventconfigs=\\"[object Object]\\"><wx-view class=\\"rate--cube-rate rate--cube-rate-justify\\"><rate-item><wx-view class=\\"rate-item--cube-rate-item rate-item--cube-rate-item_active\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item></wx-view></rate></wx-view>"`;
exports[`component rate unit test slot check matchSnapshot 1`] = `"<wx-view class=\\"main--rate-page\\"><rate data-eventconfigs=\\"[object Object]\\"><wx-view class=\\"rate--cube-rate rate--cube-rate-justify\\"><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def rate-item--cube-rate-item-def-active\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item></wx-view></rate></wx-view>"`;

exports[`component rate unit test wx-model check matchSnapshot 1`] = `"<wx-view class=\\"main--rate-demo\\"><wx-view>当前分数的值: 1</wx-view><rate data-eventconfigs=\\"[object Object]\\"><wx-view class=\\"rate--cube-rate\\"><rate-item><wx-view class=\\"rate-item--cube-rate-item rate-item--cube-rate-item_active\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item></wx-view></rate></wx-view>"`;
exports[`component rate unit test wx-model check matchSnapshot 1`] = `"<wx-view class=\\"main--rate-demo\\"><wx-view>当前分数的值: 1</wx-view><rate data-eventconfigs=\\"[object Object]\\"><wx-view class=\\"rate--cube-rate\\"><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def rate-item--cube-rate-item-def-active\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item><rate-item><wx-view class=\\"rate-item--cube-rate-item\\"><wx-view class=\\"rate-item--cube-rate-item-def\\"></wx-view></wx-view></rate-item></wx-view></rate></wx-view>"`;
12 changes: 6 additions & 6 deletions packages/mpx-cube-ui/__tests__/components/rate/rate.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ describe('component rate unit test', function () {
it(' wx:model', async () => {
// 确保 switchValue 首次显示符合预期
const rates = component.querySelector('rate').querySelectorAll('rate-item')
const rate1 = rates[0].querySelector('.cube-rate-item_active')
const rate1 = rates[0].querySelector('.cube-rate-item-def-active')
const rate2 = rates[1].querySelector('.cube-rate-item-def')
const rate3 = rates[2].querySelector('.cube-rate-item-def')
// 确保 rate 首次显示符合预期
Expand All @@ -48,8 +48,8 @@ describe('component rate unit test', function () {
component.instance.value = 2
await simulate.sleep(10)

const rateClicked1 = rates[0].querySelector('.cube-rate-item_active')
const rateClicked2 = rates[1].querySelector('.cube-rate-item_active')
const rateClicked1 = rates[0].querySelector('.cube-rate-item-def-active')
const rateClicked2 = rates[1].querySelector('.cube-rate-item-def-active')
const rateClicked3 = rates[2].querySelector('.cube-rate-item-def')
expect(component.instance.value).toBe(2)
expect(rateClicked1 !== undefined).toBe(true)
Expand All @@ -76,8 +76,8 @@ describe('component rate unit test', function () {
it(' props to rate ', async () => {
const rates = component.querySelectorAll('rate-item')
const justify = component.querySelector('.cube-rate-justify')
const rate1 = rates[0].querySelector('.cube-rate-item_active')
const rate2 = rates[1].querySelector('.cube-rate-item_half_active')
const rate1 = rates[0].querySelector('.cube-rate-item-def-active')
const rate2 = rates[1].querySelector('.cube-rate-item-def-half-active')
const rate3 = rates[2].querySelector('.cube-rate-item-def')
expect(component.instance.value).toBe(1.5)
expect(justify).toBeUndefined()
Expand Down Expand Up @@ -134,7 +134,7 @@ describe('component rate unit test', function () {
it('should render correct contents: value/justify/allowHalf/disabled', () => {
const justify = component.querySelector('rate').querySelector('.cube-rate-justify')
const rateItems = component.querySelectorAll('rate-item')
const rateItems1 = rateItems[0].querySelector('.cube-rate-item_active')
const rateItems1 = rateItems[0].querySelector('.cube-rate-item-def-active')
const rateItems2 = rateItems[1].querySelector('.cube-rate-item-def')

expect(rateItems.length).toBe(4)
Expand Down
4 changes: 2 additions & 2 deletions packages/mpx-cube-ui/src/components/rate/rate-item-index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ createComponent({
computed: {
rateItemClass() {
return {
'cube-rate-item_active': this.index <= this.value,
'cube-rate-item_half_active': this.index === this.value + 0.5
'cube-rate-item-def-active': this.index <= this.value,
'cube-rate-item-def-half-active': this.index === this.value + 0.5
}
}
}
Expand Down
30 changes: 14 additions & 16 deletions packages/mpx-cube-ui/src/components/rate/rate-item.mpx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<view class="cube-rate-item" wx:class="{{rateItemClass}}">
<view class="cube-rate-item-def">
<view class="cube-rate-item">
<view class="cube-rate-item-def" wx:class="{{rateItemClass}}">
<slot></slot>
</view>
</view>
Expand All @@ -21,20 +21,18 @@
content: ""
display: block
padding: $var(rate-item-after-padding)
.cube-rate-item-def
position: absolute
width: $var(rate-item-def-width)
height: $var(rate-item-def-height)
background-size: $var(rate-item-def-background-size)
background-repeat: no-repeat
background-position: center
background-image: $var(rate-item-star-default)
.cube-rate-item_active
.cube-rate-item-def
background-image: $var(rate-item-star-active)
.cube-rate-item_half_active
.cube-rate-item-def
background-image: $var(rate-item-star-half-active)
.cube-rate-item-def
position: absolute
width: $var(rate-item-def-width)
height: $var(rate-item-def-height)
background-size: $var(rate-item-def-background-size)
background-repeat: no-repeat
background-position: center
background-image: $var(rate-item-star-default)
.cube-rate-item-def-active
background-image: $var(rate-item-star-active)
.cube-rate-item-def-half-active
background-image: $var(rate-item-star-half-active)
</style>

<script type="application/json">
Expand Down