tmp
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class Rate extends SuperComponent {
|
||||
behaviors: string[];
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdRateProps;
|
||||
controlledProps: {
|
||||
@@ -9,7 +10,6 @@ export default class Rate extends SuperComponent {
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
defaultTexts: string[];
|
||||
tipsVisible: boolean;
|
||||
tipsLeft: number;
|
||||
actionType: string;
|
||||
|
||||
@@ -1 +1 @@
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{unitConvert,getRect}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-rate`;let Rate=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-icon`,`${prefix}-class-text`],this.properties=props,this.controlledProps=[{key:"value",event:"change"}],this.data={prefix:prefix,classPrefix:name,defaultTexts:["极差","失望","一般","满意","惊喜"],tipsVisible:!1,tipsLeft:0,actionType:"",scaleIndex:-1,isVisibleToScreenReader:!1},this.methods={onTouch(e,t){const{count:i,allowHalf:s,gap:o,value:a,size:n}=this.properties,[r]=e.changedTouches,c=unitConvert(o);getRect(this,`.${name}__wrapper`).then((e=>{const{width:p,left:h}=e,l=(p-(i-1)*c)/i,d=(r.pageX-h+c)/(l+c),u=d%1,m=d-u;let T=u<=.5&&s?m+.5:m+1;T>i?T=i:T<0&&(T=0);const x=Math.ceil(T-1)*(unitConvert(o)+unitConvert(n))+.5*unitConvert(n);this.setData({tipsVisible:!0,actionType:t,scaleIndex:Math.ceil(T),tipsLeft:Math.max(x,0)}),T!==a&&this._trigger("change",{value:T}),this.touchEnd&&this.hideTips()}))},onTap(e){const{disabled:t}=this.properties;t||this.onTouch(e,"tap")},onTouchStart(){this.touchEnd=!1},onTouchMove(e){this.onTouch(e,"move"),this.showAlertText()},onTouchEnd(){this.touchEnd=!0,this.hideTips()},hideTips(){"move"===this.data.actionType&&this.setData({tipsVisible:!1,scaleIndex:-1})},onSelect(e){const{value:t}=e.currentTarget.dataset,{actionType:i}=this.data;"move"!==i&&(this._trigger("change",{value:t}),setTimeout((()=>this.setData({tipsVisible:!1,scaleIndex:-1})),300))},showAlertText(){!0!==this.data.isVisibleToScreenReader&&(this.setData({isVisibleToScreenReader:!0}),setTimeout((()=>{this.setData({isVisibleToScreenReader:!1})}),2e3))}}}};Rate=__decorate([wxComponent()],Rate);export default Rate;
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{unitConvert,getRect}from"../common/utils";import usingConfig from"../mixins/using-config";const{prefix:prefix}=config,componentName="rate";let Rate=class extends SuperComponent{constructor(){super(...arguments),this.behaviors=[usingConfig({componentName:"rate"})],this.externalClasses=[`${prefix}-class`,`${prefix}-class-icon`,`${prefix}-class-text`],this.properties=props,this.controlledProps=[{key:"value",event:"change"}],this.data={prefix:prefix,classPrefix:`${prefix}-rate`,tipsVisible:!1,tipsLeft:0,actionType:"",scaleIndex:-1,isVisibleToScreenReader:!1},this.methods={onTouch(e,t){const{classPrefix:i}=this.data,{count:s,allowHalf:o,gap:n,value:a,size:r}=this.properties,[c]=e.changedTouches,p=unitConvert(n);getRect(this,`.${i}__wrapper`).then(e=>{const{width:i,left:h}=e,l=(i-(s-1)*p)/s,m=(c.pageX-h+p)/(l+p),u=m%1,d=m-u;let f=u<=.5&&o?d+.5:d+1;f>s?f=s:f<0&&(f=0);const x=Math.ceil(f-1)*(unitConvert(n)+unitConvert(r))+.5*unitConvert(r);this.setData({tipsVisible:!0,actionType:t,scaleIndex:Math.ceil(f),tipsLeft:Math.max(x,0)}),f!==a&&this._trigger("change",{value:f}),this.touchEnd&&this.hideTips()})},onTap(e){const{disabled:t}=this.properties;t||this.onTouch(e,"tap")},onTouchStart(){this.touchEnd=!1},onTouchMove(e){this.onTouch(e,"move"),this.showAlertText()},onTouchEnd(){this.touchEnd=!0,this.hideTips()},hideTips(){"move"===this.data.actionType&&this.setData({tipsVisible:!1,scaleIndex:-1})},onSelect(e){const{value:t}=e.currentTarget.dataset,{actionType:i}=this.data;"move"!==i&&(this._trigger("change",{value:t}),setTimeout(()=>this.setData({tipsVisible:!1,scaleIndex:-1}),300))},showAlertText(){!0!==this.data.isVisibleToScreenReader&&(this.setData({isVisibleToScreenReader:!0}),setTimeout(()=>{this.setData({isVisibleToScreenReader:!1})},2e3))}}}};Rate=__decorate([wxComponent()],Rate);export default Rate;
|
||||
@@ -1 +1 @@
|
||||
<wxs src="../common/utils.wxs" module="_"/><wxs src="./rate.wxs" module="utils"/><view class="{{classPrefix}} class" style="{{_._style([style, customStyle])}}"><view class="{{classPrefix}}__wrapper {{prefix}}-class" style="font-size:{{ utils.regSize(size) }}" bind:touchstart="{{ !disabled ? 'onTouchStart' : '' }}" bind:touchmove="{{ !disabled ? 'onTouchMove' : '' }}" bind:tap="onTap" bind:touchend="{{ !disabled ? 'onTouchEnd' : ''}}" bind:touchcancel="{{ !disabled ? 'onTouchEnd' : ''}}" aria-role="slider" aria-valuemax="{{count}}" aria-valuemin="{{0}}" aria-valuenow="{{value}}" aria-valuetext="{{utils.getText(texts,value,defaultTexts)}}"><t-icon wx:for="{{ count }}" wx:key="*this" class="{{classPrefix }}__icon {{utils.getIconClass(classPrefix + '__icon', defaultValue, value, index, allowHalf, disabled, scaleIndex)}}" style="margin-right: {{ count - index > 1 ? _.addUnit(gap) : 0 }}; {{utils.getColor(color)}}" t-class="{{prefix}}-class-icon" name="{{utils.getIconName(defaultValue, value, index, icon)}}" size="{{ size }}" prefix="{{iconPrefix}}"/></view><text wx:if="{{showText}}" class="{{_.cls(classPrefix + '__text', [['active', value > 0]])}} {{prefix}}-class-text" aria-hidden="{{true}}">{{utils.getText(texts,value,defaultTexts)}}</text><text wx:if="{{isVisibleToScreenReader}}" class="{{_.cls(classPrefix + '__text', [['active', value > 0], ['sr-only', isVisibleToScreenReader]])}} {{prefix}}-class-text" aria-role="alert" aria-live="assertive">{{value+'星'}} {{utils.getText(texts,value,defaultTexts)}}</text><view wx:if="{{tipsVisible && placement}}" class="{{_.cls(classPrefix + '__tips', [placement])}}" style="left: {{tipsLeft}}px" aria-hidden="{{true}}"><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, 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, 0, 0, icon)}}" size="{{ size }}" style="{{utils.getColor(color)}}"/><view class="{{classPrefix}}__tips-text">{{utils.ceil(value)}}</view></view></block><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="{{_.cls(classPrefix + '__icon', [['selected', utils.ceil(value) == value], ['selected-half', utils.ceil(value) != value]]) }}" name="{{utils.getIconName(defaultValue, 0, 0, icon)}}" size="{{ size }}" style="{{utils.getColor(color)}}"/><view class="{{classPrefix}}__tips-text">{{value}}</view></view></view></view>
|
||||
<wxs src="../common/utils.wxs" module="_"/><wxs src="./rate.wxs" module="utils"/><view class="{{classPrefix}} class" style="{{_._style([style, customStyle])}}"><view class="{{classPrefix}}__wrapper {{prefix}}-class" style="font-size:{{ utils.regSize(size) }}" bind:touchstart="{{ !disabled ? 'onTouchStart' : '' }}" bind:touchmove="{{ !disabled ? 'onTouchMove' : '' }}" bind:tap="onTap" bind:touchend="{{ !disabled ? 'onTouchEnd' : ''}}" bind:touchcancel="{{ !disabled ? 'onTouchEnd' : ''}}" aria-role="slider" aria-valuemax="{{count}}" aria-valuemin="{{0}}" aria-valuenow="{{value}}" aria-valuetext="{{utils.getText(texts,value,globalConfig)}}"><t-icon wx:for="{{ count }}" wx:key="*this" class="{{classPrefix }}__icon {{utils.getIconClass(classPrefix + '__icon', defaultValue, value, index, allowHalf, disabled, scaleIndex)}}" style="margin-right: {{ count - index > 1 ? _.addUnit(gap) : 0 }}; {{utils.getColor(color)}}" t-class="{{prefix}}-class-icon" name="{{utils.getIconName(defaultValue, value, index, icon)}}" size="{{ size }}" prefix="{{iconPrefix}}"/></view><text wx:if="{{showText}}" class="{{_.cls(classPrefix + '__text', [['active', value > 0]])}} {{prefix}}-class-text" aria-hidden="{{true}}">{{utils.getText(texts,value,globalConfig)}}</text><text wx:if="{{isVisibleToScreenReader}}" class="{{_.cls(classPrefix + '__text', [['active', value > 0], ['sr-only', isVisibleToScreenReader]])}} {{prefix}}-class-text" aria-role="alert" aria-live="assertive">{{value+'星'}} {{utils.getText(texts,value,globalConfig)}}</text><view wx:if="{{tipsVisible && placement}}" class="{{_.cls(classPrefix + '__tips', [placement])}}" style="left: {{tipsLeft}}px" aria-hidden="{{true}}"><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, 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, 0, 0, icon)}}" size="{{ size }}" style="{{utils.getColor(color)}}"/><view class="{{classPrefix}}__tips-text">{{utils.ceil(value)}}</view></view></block><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="{{_.cls(classPrefix + '__icon', [['selected', utils.ceil(value) == value], ['selected-half', utils.ceil(value) != value]]) }}" name="{{utils.getIconName(defaultValue, 0, 0, icon)}}" size="{{ size }}" style="{{utils.getColor(color)}}"/><view class="{{classPrefix}}__tips-text">{{value}}</view></view></view></view>
|
||||
@@ -1,10 +1,10 @@
|
||||
module.exports = {
|
||||
getText: function (texts, val, defaultTexts) {
|
||||
getText: function (texts, val, globalConfig) {
|
||||
if (!texts.length) {
|
||||
texts = defaultTexts;
|
||||
texts = globalConfig.texts || [];
|
||||
}
|
||||
var curVal = Math.floor(val - 1);
|
||||
return texts[curVal] || '未评分';
|
||||
return texts[curVal] || globalConfig.noValueText;
|
||||
},
|
||||
|
||||
getIconName: function (defaultValue, value, index, icon) {
|
||||
|
||||
@@ -1 +1,15 @@
|
||||
@import '../common/style/index.wxss';.t-rate{position:relative;display:flex;align-items:center;justify-content:flex-start}.t-rate__wrapper{line-height:1em;display:inline-flex}.t-rate__icon{display:block;line-height:1em;width:1em;transition:transform .3s ease}.t-rate__icon--current{transform:scale(var(--td-rate-icon-scale,1.33))}.t-rate__icon--selected{color:var(--td-rate-selected-color,var(--td-warning-color,var(--td-warning-color-5,#e37318)))}.t-rate__icon--selected-half{color:transparent;background:linear-gradient(to right,var(--td-rate-selected-color,var(--td-warning-color,var(--td-warning-color-5,#e37318))) 0,var(--td-rate-selected-color,var(--td-warning-color,var(--td-warning-color-5,#e37318))) 50%,var(--td-rate-unselected-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc))) 51%,var(--td-rate-unselected-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc))) 100%);-webkit-background-clip:text;background-clip:text}.t-rate__icon--unselected{color:var(--td-rate-unselected-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc)))}.t-rate__text{font-size:var(--td-rate-text-font-size,var(--td-font-size-m,32rpx));color:var(--td-rate-text-color,var(--td-text-color-disabled,var(--td-font-gray-4,rgba(0,0,0,.26))));margin-left:32rpx;vertical-align:middle}.t-rate__text--active{color:var(--td-rate-text-active-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));font-weight:var(--td-rate-text-active-font-weight,600)}.t-rate__text--sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%);border:0}.t-rate__tips{position:absolute;display:flex;align-items:center;bottom:calc(100% + 16rpx);padding:8rpx;border-radius:12rpx;box-shadow:var(--td-shadow-1,0 1px 10px rgba(0,0,0,.05),0 4px 5px rgba(0,0,0,.08),0 2px 4px -1px rgba(0,0,0,.12));background-color:var(--td-bg-color-container,var(--td-font-white-1,#fff));transform:translateX(-50%)}.t-rate__tips--bottom{top:calc(100% + 16rpx);bottom:auto}.t-rate__tips-item{display:flex;flex-direction:column;align-items:center;width:64rpx;border-radius:6rpx}.t-rate__tips-item--active{background-color:var(--td-bg-color-component,var(--td-gray-color-3,#e7e7e7))}.t-rate__tips-text{text-align:center;font-size:24rpx;line-height:40rpx}
|
||||
@import '../common/style/index.wxss';.t-rate{position:relative;display:flex;align-items:center;justify-content:flex-start;}
|
||||
.t-rate__wrapper{line-height:1em;display:inline-flex;}
|
||||
.t-rate__icon{display:block;line-height:1em;width:1em;transition:transform .3s ease;}
|
||||
.t-rate__icon--current{transform:scale(var(--td-rate-icon-scale,1.33));}
|
||||
.t-rate__icon--selected{color:var(--td-rate-selected-color,var(--td-warning-color,var(--td-warning-color-5,#e37318)));}
|
||||
.t-rate__icon--selected-half{color:transparent;background:linear-gradient(to right,var(--td-rate-selected-color,var(--td-warning-color,var(--td-warning-color-5,#e37318))) 0,var(--td-rate-selected-color,var(--td-warning-color,var(--td-warning-color-5,#e37318))) 50%,var(--td-rate-unselected-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc))) 51%,var(--td-rate-unselected-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc))) 100%);-webkit-background-clip:text;background-clip:text;}
|
||||
.t-rate__icon--unselected{color:var(--td-rate-unselected-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc)));}
|
||||
.t-rate__text{font-size:var(--td-rate-text-font-size,var(--td-font-size-m,32rpx));color:var(--td-rate-text-color,var(--td-text-color-disabled,var(--td-font-gray-4,rgba(0,0,0,.26))));margin-left:32rpx;vertical-align:middle;}
|
||||
.t-rate__text--active{color:var(--td-rate-text-active-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));font-weight:var(--td-rate-text-active-font-weight,600);}
|
||||
.t-rate__text--sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%);border:0;}
|
||||
.t-rate__tips{position:absolute;display:flex;align-items:center;bottom:calc(100% + 16rpx);padding:8rpx;border-radius:12rpx;box-shadow:var(--td-shadow-1,0 1px 10px rgba(0,0,0,.05),0 4px 5px rgba(0,0,0,.08),0 2px 4px -1px rgba(0,0,0,.12));background-color:var(--td-bg-color-container,var(--td-font-white-1,#fff));transform:translateX(-50%);}
|
||||
.t-rate__tips--bottom{top:calc(100% + 16rpx);bottom:auto;}
|
||||
.t-rate__tips-item{display:flex;flex-direction:column;align-items:center;width:64rpx;border-radius:6rpx;}
|
||||
.t-rate__tips-item--active{background-color:var(--td-bg-color-component,var(--td-gray-color-3,#e7e7e7));}
|
||||
.t-rate__tips-text{text-align:center;font:var(--td-font-body-medium,28rpx / 44rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular));}
|
||||
Reference in New Issue
Block a user