This commit is contained in:
lik
2026-05-30 21:09:24 +08:00
parent 212c94224b
commit 010cf160a0
1075 changed files with 67487 additions and 1 deletions

View File

@@ -0,0 +1,50 @@
:: BASE_DOC ::
## API
### Rate Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)used to set style on virtual component | N
allow-half | Boolean | false | \- | N
color | String / Array | '#ED7B2F' | `0.30.0`。Typescript`string \| Array<string>` | N
count | Number | 5 | \- | N
disabled | Boolean | undefined | \- | N
gap | String / Number | 8 | \- | N
icon | String / Array | - | `0.30.0`。Typescript`string \| string[]` | N
icon-prefix | String | undefined | \- | N
placement | String | top | options: top / bottom / '' | N
show-text | Boolean | false | \- | N
size | String | 24px | \- | N
texts | Array | [] | Typescript`Array<string>` | N
value | Number | 0 | \- | N
default-value | Number | undefined | uncontrolled property | N
variant | String | outline | options: outline/filled | N
### Rate Events
name | params | description
-- | -- | --
change | `(value: number)` | \-
### Rate External Classes
className | Description
-- | --
t-class | \-
t-class-icon | \-
t-class-text | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-rate-icon-scale | 1.33 | -
--td-rate-selected-color | @warning-color | -
--td-rate-text-active-color | @font-gray-1 | -
--td-rate-text-active-font-weight | 600 | -
--td-rate-text-color | @font-gray-4 | -
--td-rate-text-font-size | @font-size-m | -
--td-rate-unselected-color | @bg-color-secondarycomponent | -

View File

@@ -0,0 +1,119 @@
---
title: Rate 评分
description: 用于对某行为/事物进行打分。
spline: form
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-50%25-red" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
{
"usingComponents": {
"t-rate": "tdesign-miniprogram/rate/rate"
}
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/J86K2imu7tSh" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 组件类型
实心评分
{{ base }}
自定义评分
{{ custom }}
自定义评分数量
{{ count }}
带描述评分
{{ show-text }}
### 组件状态
{{ action }}
### 组件样式
评分大小
{{ size }}
设置评分颜色
{{ color }}
### 特殊样式
竖向带描述评分
{{ special }}
自定义图片前缀
{{iconPrefix}}
## API
### Rate Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
allow-half | Boolean | false | 是否允许半选 | N
color | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色,样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色,示例:[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色,[选中颜色,未选中颜色]。示例:['#ED7B2F', '#E3E6EB']。TS 类型:`string \| Array<string>` | N
count | Number | 5 | 评分的数量 | N
disabled | Boolean | undefined | 是否禁用评分 | N
gap | String / Number | 8 | 评分图标的间距 | N
icon | String / Array | - | `0.30.0`。自定义评分图标,[选中图标,未选中图标]。TS 类型:`string \| string[]` | N
icon-prefix | String | undefined | 定义图标前缀 | N
placement | String | top | 选择评分弹框的位置值为空字符表示不显示评分弹框。可选项top / bottom / '' | N
show-text | Boolean | false | 是否显示对应的辅助文字 | N
size | String | 24px | 评分图标的大小 | N
texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为:['极差', '失望', '一般', '满意', '惊喜']。自定义值示例:['1分', '2分', '3分', '4分', '5分']。TS 类型:`Array<string>` | N
value | Number | 0 | 选择评分的值 | N
default-value | Number | undefined | 选择评分的值。非受控属性 | N
variant | String | outline | 已废弃。形状类型有描边类型和填充类型两种。可选项outline/filled | N
### Rate Events
名称 | 参数 | 描述
-- | -- | --
change | `(value: number)` | 评分数改变时触发
### Rate External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-icon | 图标样式类
t-class-text | 文本样式类
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-rate-icon-scale | 1.33 | -
--td-rate-selected-color | @warning-color | -
--td-rate-text-active-color | @font-gray-1 | -
--td-rate-text-active-font-weight | 600 | -
--td-rate-text-color | @font-gray-4 | -
--td-rate-text-font-size | @font-size-m | -
--td-rate-unselected-color | @bg-color-secondarycomponent | -

View File

@@ -0,0 +1,3 @@
import { TdRateProps } from './type';
declare const props: TdRateProps;
export default props;

View File

@@ -0,0 +1,58 @@
const props = {
allowHalf: {
type: Boolean,
value: false,
},
color: {
type: null,
value: '#ED7B2F',
},
count: {
type: Number,
value: 5,
},
disabled: {
type: null,
value: undefined,
},
gap: {
type: null,
value: 8,
},
icon: {
type: null,
},
iconPrefix: {
type: String,
value: undefined,
},
placement: {
type: String,
value: 'top',
},
showText: {
type: Boolean,
value: false,
},
size: {
type: String,
value: '24px',
},
texts: {
type: Array,
value: [],
},
value: {
type: Number,
value: null,
},
defaultValue: {
type: Number,
value: 0,
},
variant: {
type: String,
value: 'outline',
},
};
export default props;

View File

@@ -0,0 +1,29 @@
import { SuperComponent } from '../common/src/index';
export default class Rate extends SuperComponent {
externalClasses: string[];
properties: import("./type").TdRateProps;
controlledProps: {
key: string;
event: string;
}[];
data: {
prefix: string;
classPrefix: string;
defaultTexts: string[];
tipsVisible: boolean;
tipsLeft: number;
actionType: string;
scaleIndex: number;
isVisibleToScreenReader: boolean;
};
methods: {
onTouch(e: WechatMiniprogram.TouchEvent, eventType: 'tap' | 'move'): void;
onTap(e: WechatMiniprogram.TouchEvent): void;
onTouchStart(): void;
onTouchMove(e: WechatMiniprogram.TouchEvent): void;
onTouchEnd(): void;
hideTips(): void;
onSelect(e: WechatMiniprogram.TouchEvent): void;
showAlertText(): void;
};
}

View File

@@ -0,0 +1,118 @@
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
import { unitConvert, getRect } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-rate`;
let Rate = class Rate 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,
classPrefix: name,
defaultTexts: ['极差', '失望', '一般', '满意', '惊喜'],
tipsVisible: false,
tipsLeft: 0,
actionType: '',
scaleIndex: -1,
isVisibleToScreenReader: false,
};
this.methods = {
onTouch(e, eventType) {
const { count, allowHalf, gap, value: currentValue, size } = this.properties;
const [touch] = e.changedTouches;
const margin = unitConvert(gap);
getRect(this, `.${name}__wrapper`).then((rect) => {
const { width, left } = rect;
const starWidth = (width - (count - 1) * margin) / count;
const offsetX = touch.pageX - left;
const num = (offsetX + margin) / (starWidth + margin);
const remainder = num % 1;
const integral = num - remainder;
let value = remainder <= 0.5 && allowHalf ? integral + 0.5 : integral + 1;
if (value > count) {
value = count;
}
else if (value < 0) {
value = 0;
}
if (eventType === 'move' || (eventType === 'tap' && allowHalf)) {
const left = Math.ceil(value - 1) * (unitConvert(gap) + unitConvert(size)) + unitConvert(size) * 0.5;
this.setData({
tipsVisible: true,
actionType: eventType,
scaleIndex: Math.ceil(value),
tipsLeft: Math.max(left, 0),
});
}
if (value !== currentValue) {
this._trigger('change', { value });
}
if (this.touchEnd) {
this.hideTips();
}
});
},
onTap(e) {
const { disabled } = this.properties;
if (disabled)
return;
this.onTouch(e, 'tap');
},
onTouchStart() {
this.touchEnd = false;
},
onTouchMove(e) {
this.onTouch(e, 'move');
this.showAlertText();
},
onTouchEnd() {
this.touchEnd = true;
this.hideTips();
},
hideTips() {
if (this.data.actionType === 'move') {
this.setData({ tipsVisible: false, scaleIndex: -1 });
}
},
onSelect(e) {
const { value } = e.currentTarget.dataset;
const { actionType } = this.data;
if (actionType === 'move')
return;
this._trigger('change', { value });
setTimeout(() => this.setData({ tipsVisible: false, scaleIndex: -1 }), 300);
},
showAlertText() {
if (this.data.isVisibleToScreenReader === true)
return;
this.setData({
isVisibleToScreenReader: true,
});
setTimeout(() => {
this.setData({
isVisibleToScreenReader: false,
});
}, 2e3);
},
};
}
};
Rate = __decorate([
wxComponent()
], Rate);
export default Rate;

View File

@@ -0,0 +1,7 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-icon": "../icon/icon"
}
}

View File

@@ -0,0 +1,93 @@
<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>

View File

@@ -0,0 +1,65 @@
module.exports = {
getText: function (texts, val, defaultTexts) {
if (!texts.length) {
texts = defaultTexts;
}
var curVal = Math.floor(val - 1);
return texts[curVal] || '未评分';
},
getIconName: function (defaultValue, value, index, icon) {
var curVal = value >= 0 ? value : defaultValue;
var name = ['star-filled', 'star-filled'];
if (icon) {
name = icon.constructor == 'Array' ? icon : [icon, icon];
}
return name[curVal >= index + 1 ? 0 : 1];
},
getIconClass: function (classPrefix, defaultValue, value, index, allowHalf, disabled, scaleIndex) {
var curVal = value >= 0 ? value : defaultValue;
var className = [];
if (curVal >= index + 1) {
className.push(classPrefix + '--selected');
if (disabled) {
className.push(classPrefix + '--disabled');
}
if (scaleIndex === index + 1) {
className.push(classPrefix + '--current');
}
} 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');
}
} else {
className.push(classPrefix + '--unselected');
}
return className.join(' ');
},
ceil: function (value) {
return Math.ceil(value);
},
getColor: function (color) {
if (color.constructor === 'Array' && color.length === 2) {
return ';--td-rate-selected-color: ' + color[0] + '; --td-rate-unselected-color: ' + color[1];
}
if (typeof color === 'string') {
return ';--td-rate-selected-color: ' + color;
}
return '';
},
regSize: function (val) {
return val.indexOf('px') ? val : val + 'px';
},
};

View File

@@ -0,0 +1,109 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.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 0.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, 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, 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, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12));
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
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;
}

View File

@@ -0,0 +1,58 @@
export interface TdRateProps {
allowHalf?: {
type: BooleanConstructor;
value?: boolean;
};
color?: {
type: null;
value?: string | Array<string>;
};
count?: {
type: NumberConstructor;
value?: number;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
gap?: {
type: null;
value?: string | number;
};
icon?: {
type: null;
value?: string | string[];
};
iconPrefix?: {
type: StringConstructor;
value?: string;
};
placement?: {
type: StringConstructor;
value?: 'top' | 'bottom' | '';
};
showText?: {
type: BooleanConstructor;
value?: boolean;
};
size?: {
type: StringConstructor;
value?: string;
};
texts?: {
type: ArrayConstructor;
value?: Array<string>;
};
value?: {
type: NumberConstructor;
value?: number;
};
defaultValue?: {
type: NumberConstructor;
value?: number;
};
variant?: {
type: StringConstructor;
value?: 'outline' | 'filled';
};
}

View File

@@ -0,0 +1 @@
export {};