白色主题
This commit is contained in:
@@ -11,7 +11,7 @@ const props = {
|
||||
type: Number,
|
||||
value: 5,
|
||||
},
|
||||
customStyle: {
|
||||
style: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
|
||||
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
||||
import { SuperComponent, wxComponent } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import props from './props';
|
||||
import { unitConvert } from '../common/utils';
|
||||
import { unitConvert, getRect } from '../common/utils';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-rate`;
|
||||
let Rate = class Rate extends SuperComponent {
|
||||
@@ -35,10 +35,7 @@ let Rate = class Rate extends SuperComponent {
|
||||
const { count, allowHalf, gap, value: currentValue, size } = this.properties;
|
||||
const [touch] = e.touches;
|
||||
const margin = unitConvert(gap);
|
||||
const selQuery = this.createSelectorQuery();
|
||||
selQuery
|
||||
.select(`.${name}__wrapper`)
|
||||
.boundingClientRect((rect) => {
|
||||
getRect(this, `.${name}__wrapper`).then((rect) => {
|
||||
const { width, left } = rect;
|
||||
const starWidth = (width - (count - 1) * margin) / count;
|
||||
const offsetX = touch.pageX - left;
|
||||
@@ -57,15 +54,14 @@ let Rate = class Rate extends SuperComponent {
|
||||
this.setData({
|
||||
tipsVisible: true,
|
||||
actionType: eventType,
|
||||
scaleIndex: eventType === 'move' ? Math.ceil(value) : -1,
|
||||
scaleIndex: Math.ceil(value),
|
||||
tipsLeft: Math.max(left, 0),
|
||||
});
|
||||
}
|
||||
if (value !== currentValue) {
|
||||
this._trigger('change', { value });
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
},
|
||||
onTap(e) {
|
||||
this.onTouch(e, 'tap');
|
||||
@@ -86,7 +82,7 @@ let Rate = class Rate extends SuperComponent {
|
||||
if (actionType === 'move')
|
||||
return;
|
||||
this._trigger('change', { value });
|
||||
setTimeout(() => this.setData({ tipsVisible: false }), 300);
|
||||
setTimeout(() => this.setData({ tipsVisible: false, scaleIndex: -1 }), 300);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<t-icon
|
||||
wx:for="{{ count }}"
|
||||
wx:key="*this"
|
||||
class="{{classPrefix }}__icon {{utils.getIconClass(classPrefix + '__icon', defaultValue, value, index, allowHalf, disabled, scaleIndex)}} "
|
||||
class="{{classPrefix }}__icon {{utils.getIconClass(classPrefix + '__icon', defaultValue, value, index, allowHalf, disabled, scaleIndex)}}"
|
||||
t-class="{{prefix}}-class-icon"
|
||||
name="{{utils.getIconName(defaultValue, value, index, variant, icon)}}"
|
||||
size="{{ size }}"
|
||||
@@ -24,32 +24,48 @@
|
||||
>{{utils.getText(texts,value,defaultTexts)}}</text
|
||||
>
|
||||
<view wx:if="{{tipsVisible}}" class="{{classPrefix}}__tips" style="left: {{tipsLeft}}px">
|
||||
<block wx:if="{{actionType == 'tap'}}">
|
||||
<view
|
||||
wx:if="{{allowHalf}}"
|
||||
class="{{_.cls(classPrefix + '__tips-item', [['active', utils.ceil(value) - 0.5 == value]])}}"
|
||||
bind:tap="onSelect"
|
||||
data-value="{{utils.ceil(value) - 0.5}}"
|
||||
>
|
||||
<t-icon
|
||||
class="{{classPrefix }}__icon {{classPrefix }}__icon--selected-half"
|
||||
name="{{utils.getIconName(defaultValue, value, index, variant, icon)}}"
|
||||
size="{{ size }}"
|
||||
style="{{utils.getColor(color)}}"
|
||||
/>
|
||||
<view class="{{classPrefix}}__tips-text">{{utils.ceil(value) - 0.5}}</view>
|
||||
</view>
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__tips-item', [['active', utils.ceil(value) == value]])}}"
|
||||
bind:tap="onSelect"
|
||||
data-value="{{utils.ceil(value)}}"
|
||||
>
|
||||
<t-icon
|
||||
class="{{_.cls(classPrefix + '__icon', ['selected'])}}"
|
||||
name="{{utils.getIconName(defaultValue, value, index, 'filled', icon)}}"
|
||||
size="{{ size }}"
|
||||
style="{{utils.getColor(color)}}"
|
||||
/>
|
||||
<view class="{{classPrefix}}__tips-text">{{utils.ceil(value)}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<view
|
||||
wx:if="{{allowHalf && actionType == 'tap'}}"
|
||||
class="{{_.cls(classPrefix + '__tips-item', [['active', utils.ceil(value) - 0.5 == value]])}}"
|
||||
bind:tap="onSelect"
|
||||
data-value="{{utils.ceil(value) - 0.5}}"
|
||||
>
|
||||
<t-icon
|
||||
class="{{classPrefix }}__icon {{classPrefix }}__icon--selected"
|
||||
name="{{utils.getIconName(defaultValue, value, index, variant, icon)}}"
|
||||
size="{{ size }}"
|
||||
style="{{utils.getColor(color)}}"
|
||||
/>
|
||||
<view class="{{classPrefix}}__tips-text">{{utils.ceil(value) - 0.5}}</view>
|
||||
</view>
|
||||
<view
|
||||
wx:else
|
||||
class="{{_.cls(classPrefix + '__tips-item', [['active', utils.ceil(value) == value && actionType == 'tap']])}}"
|
||||
bind:tap="onSelect"
|
||||
data-value="{{utils.ceil(value)}}"
|
||||
>
|
||||
<t-icon
|
||||
class="{{classPrefix }}__icon {{classPrefix }}__icon--selected"
|
||||
class="{{_.cls(classPrefix + '__icon', [['selected', utils.ceil(value) == value], ['selected-half', utils.ceil(value) != value]]) }}"
|
||||
name="{{utils.getIconName(defaultValue, value, index, 'filled', icon)}}"
|
||||
size="{{ size }}"
|
||||
style="{{utils.getColor(color)}}"
|
||||
style="{{utils.getColor(color)}}; font-size: {{size}};"
|
||||
/>
|
||||
<view class="{{classPrefix}}__tips-text">{{actionType == 'tap' ? utils.ceil(value) : value}}</view>
|
||||
<view class="{{classPrefix}}__tips-text">{{value}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -33,6 +33,9 @@ module.exports = {
|
||||
}
|
||||
} else if (allowHalf && curVal - index > 0) {
|
||||
className.push(classPrefix + '--selected-half');
|
||||
if (scaleIndex === index + 1) {
|
||||
className.push(classPrefix + '--current');
|
||||
}
|
||||
if (disabled) {
|
||||
className.push(classPrefix + '--disabled-half');
|
||||
}
|
||||
|
||||
@@ -36,7 +36,9 @@
|
||||
display: inline-flex;
|
||||
}
|
||||
.t-rate__icon {
|
||||
display: block;
|
||||
line-height: 1em;
|
||||
width: 1em;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.t-rate__icon--current {
|
||||
@@ -76,6 +78,9 @@
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.t-rate__tips-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 64rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ export interface TdRateProps {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
customStyle?: {
|
||||
style?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user