start
This commit is contained in:
50
miniprogram_npm/tdesign-miniprogram/rate/README.en-US.md
Normal file
50
miniprogram_npm/tdesign-miniprogram/rate/README.en-US.md
Normal 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 | -
|
||||
119
miniprogram_npm/tdesign-miniprogram/rate/README.md
Normal file
119
miniprogram_npm/tdesign-miniprogram/rate/README.md
Normal 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 | -
|
||||
3
miniprogram_npm/tdesign-miniprogram/rate/props.d.ts
vendored
Normal file
3
miniprogram_npm/tdesign-miniprogram/rate/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdRateProps } from './type';
|
||||
declare const props: TdRateProps;
|
||||
export default props;
|
||||
58
miniprogram_npm/tdesign-miniprogram/rate/props.js
Normal file
58
miniprogram_npm/tdesign-miniprogram/rate/props.js
Normal 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;
|
||||
29
miniprogram_npm/tdesign-miniprogram/rate/rate.d.ts
vendored
Normal file
29
miniprogram_npm/tdesign-miniprogram/rate/rate.d.ts
vendored
Normal 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;
|
||||
};
|
||||
}
|
||||
118
miniprogram_npm/tdesign-miniprogram/rate/rate.js
Normal file
118
miniprogram_npm/tdesign-miniprogram/rate/rate.js
Normal 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;
|
||||
7
miniprogram_npm/tdesign-miniprogram/rate/rate.json
Normal file
7
miniprogram_npm/tdesign-miniprogram/rate/rate.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
93
miniprogram_npm/tdesign-miniprogram/rate/rate.wxml
Normal file
93
miniprogram_npm/tdesign-miniprogram/rate/rate.wxml
Normal 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>
|
||||
65
miniprogram_npm/tdesign-miniprogram/rate/rate.wxs
Normal file
65
miniprogram_npm/tdesign-miniprogram/rate/rate.wxs
Normal 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';
|
||||
},
|
||||
};
|
||||
109
miniprogram_npm/tdesign-miniprogram/rate/rate.wxss
Normal file
109
miniprogram_npm/tdesign-miniprogram/rate/rate.wxss
Normal 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;
|
||||
}
|
||||
58
miniprogram_npm/tdesign-miniprogram/rate/type.d.ts
vendored
Normal file
58
miniprogram_npm/tdesign-miniprogram/rate/type.d.ts
vendored
Normal 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';
|
||||
};
|
||||
}
|
||||
1
miniprogram_npm/tdesign-miniprogram/rate/type.js
Normal file
1
miniprogram_npm/tdesign-miniprogram/rate/type.js
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user