Skip to content

Commit

Permalink
feat: rate中自定义插槽功能完成
Browse files Browse the repository at this point in the history
  • Loading branch information
[email protected] committed Jan 13, 2025
1 parent b24de1d commit 41b4bda
Show file tree
Hide file tree
Showing 7 changed files with 35 additions and 24 deletions.
24 changes: 18 additions & 6 deletions example/pages/rate/index.mpx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
<base-container>
<view class="content">
<view class="rate-wrapper">
<rate wx:model="{{value}}" wx:model-prop="value" disabled="{{disabled}}" max="{{_max}}" justify="{{justify}}" allowHalf="{{allowHalf}}">
<rate wx:model="{{value}}" wx:model-prop="value" disabled="{{disabled}}" isCustomize="{{customize}}" max="{{_max}}" justify="{{justify}}" allowHalf="{{allowHalf}}">
<rate-item wx:for="{{_max}}" wx:key="item" index="{{item}}" value="{{value}}">
<view class="rate-item-demo"></view>
</rate-item>
</rate>
</view>
<view class="options">
Expand Down Expand Up @@ -39,8 +42,8 @@
<view class="item">CustomStar</view>
<switch
color="{{ switchColor }}"
checked="{{ customStar }}"
bindchange="updateCustomStar"
checked="{{ customize }}"
bindchange="updateCustomize"
/>
</view>
<view class="group-item">
Expand Down Expand Up @@ -70,7 +73,7 @@
data: {
value: 4.5,
max: '5',
customStar: false,
customize: false,
justify: false,
allowHalf: true,
disabled: true,
Expand Down Expand Up @@ -98,9 +101,9 @@
const { value } = e.detail
this.justify = value
},
updateCustomStar (e) {
updateCustomize (e) {
const { value } = e.detail
this.customStar = value
this.customize = value
},
updateAllowHalf (e) {
const { value } = e.detail
Expand All @@ -115,6 +118,11 @@
padding-top: 10px
height 100%
background-color rgba(239, 239, 244, .7)
.rate-item-demo
width: 100%
height: 100%
background-size: 100%
background-color: grey
.options
margin: 20px 0
.rate-option-list
Expand Down Expand Up @@ -144,6 +152,10 @@
border-bottom: none
.desc
margin-top 15px

.cube-rate-item_active
.rate-item-demo
background-color: orange
</style>

<script type="application/json">
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"docs:prod": "npm run example:build && NODE_ENV=production npm run docs:build && cp -r ./example/dist/web ./docs/.vuepress/dist/example",
"example:build": "cd example && npm run build:web",
"example:dev": "cd example && npm run watch:web",
"example:mp:dev": "cd example && npm run watch:mp",
"example:mp:dev": "cd example && npm run watch:ali",
"fix": "eslint --fix --ext .js,.ts,.mpx packages/",
"lint": "eslint --ext .js,.ts,.mpx packages/",
"prepare": "husky install",
Expand Down
6 changes: 3 additions & 3 deletions packages/mpx-cube-ui/__tests__/components/rate/rate.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@ describe('component rate unit test', function () {
// })

it(' wx:model', async () => {
// const rates = component.querySelector('rate').querySelector('.cube-rate-items')
const rates = component.querySelector('rate').querySelector('.cube-rate-items').querySelectorAll('.cube-rate-item')
console.log(44, rates.length)
// const rates = component.querySelector('rate').querySelectorAll('rate-item')
const rates = component.querySelector('rate').querySelector('.cube-rate-items')
console.log(44, rates.dom.innerHTML)
const rate1 = rates[0].querySelector('.cube-rate-item_active')
const rate2 = rates[1].querySelector('.cube-rate-item-def')
const rate3 = rates[2].querySelector('.cube-rate-item-def')
Expand Down
10 changes: 5 additions & 5 deletions packages/mpx-cube-ui/src/components/rate/index.mpx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@
catchmousedown="handleStart"
catchmousemove="handleMove"
catchmouseup="handleEnd">
<slot wx:if="{{isCustom}}">
</slot>
<view class="cube-rate-items" id="cube-rate-items" wx:class="{{rateClass}}" wx:else>
<rate-item class="rate-item" wx:for="{{max}}" wx:key="item" index="{{item}}" value="{{value}}" isCustom="{{false}}"/>
<view class="cube-rate-items" id="cube-rate-items" wx:class="{{rateClass}}" >
<slot wx:if="{{isCustomize}}"></slot>
<block wx:else>
<rate-item wx:for="{{max}}" wx:key="item" index="{{item}}" value="{{value}}" isCustomize="{{false}}"/>
</block>
</view>
</view>
</template>
Expand All @@ -29,7 +30,6 @@
vertical-align: top
flex-wrap: nowrap
max-width: $var(rate-max-width)

.cube-rate-justify
width: $var(rate-justify-width)
justify-content: space-between
Expand Down
4 changes: 2 additions & 2 deletions packages/mpx-cube-ui/src/components/rate/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ createComponent({
/**
* @description 是否自定义
*/
isCustom: {
isCustomize: {
type: Boolean,
value: false
}
Expand All @@ -77,7 +77,7 @@ createComponent({
},
lifetimes: {
created() {
this.domName = this.isCustom ? '#cube-rate' : '#cube-rate-items'
this.domName = this.isCustomize ? '#cube-rate' : '#cube-rate-items'
this.mousePressed = false
}
},
Expand Down
6 changes: 3 additions & 3 deletions packages/mpx-cube-ui/src/components/rate/rate-item-index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { createComponent } from '@mpxjs/core'
import { isWeb } from '../../common/helper/utils'
import { isWx } from '../../common/helper/utils'

createComponent({
properties: {
Expand All @@ -11,14 +11,14 @@ createComponent({
type: Number,
value: 0
},
isCustom: {
isCustomize: {
type: Boolean,
value: true
}
},
computed: {
rateItemClass() {
const indexValue = isWeb ? this.index : this.index + 1
const indexValue = isWx ? this.index + 1 : this.index
return {
'cube-rate-item_active': indexValue <= this.value,
'cube-rate-item_half_active': indexValue === this.value + 0.5
Expand Down
7 changes: 3 additions & 4 deletions packages/mpx-cube-ui/src/components/rate/rate-item.mpx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<template>
<view class="cube-rate-item" wx:class="{{rateItemClass}}">
<slot wx:if="{{isCustom}}"></slot>
<view wx:else class="cube-rate-item-def"></view>
<view class="cube-rate-item-def">
<slot></slot>
</view>
</view>
</template>
<script src="./rate-item-index.ts" lang="ts"></script>
Expand All @@ -20,8 +21,6 @@
content: ""
display: block
padding: $var(rate-item-after-padding)
&:last-child
margin-right: $var(rate-item-last-child-margin-right)
.cube-rate-item-def
position: absolute
width: $var(rate-item-def-width)
Expand Down

0 comments on commit 41b4bda

Please sign in to comment.