e2hang/HuajisheTools
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

New Huajishe Check ChaoXing

Browse Source
This commit is contained in:
e2hang
2025-10-01 10:01:52 +08:00
parent 240b884eac
commit 80be8ae3cf
1094 changed files with 61709 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/switch/README.en-US.md Normal file
View File

@@ -0,0 +1,61 @@
:: BASE_DOC ::
## API
### Switch 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
custom-value | Array | [true, false] | Typescript：`Array<SwitchValue>` | N
disabled | Boolean | undefined | \- | N
icon | Array | [] | `0.27.0`。Typescript：`string[]` | N
label | Array | [] | `0.27.0`。Typescript：`string[]` | N
loading | Boolean | false | `0.27.0` | N
size | String | medium | `0.27.0`。options: small/medium/large | N
value | String / Number / Boolean | null | Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N
default-value | String / Number / Boolean | undefined | uncontrolled property。Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N
### Switch Events
name | params | description
-- | -- | --
change | `(value: SwitchValue)` | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-switch-checked-color | @brand-color | -
--td-switch-checked-disabled-color | @brand-color-disabled | -
--td-switch-dot-border-color | @bg-color-secondarycontainer | -
--td-switch-dot-horizontal-margin | 6rpx | -
--td-switch-dot-large-size | 52rpx | -
--td-switch-dot-plain-horizontal-margin | 10rpx | -
--td-switch-dot-plain-large-size | 44rpx | -
--td-switch-dot-plain-size | 36rpx | -
--td-switch-dot-plain-small-size | 28rpx | -
--td-switch-dot-shadow | @shadow-1 | -
--td-switch-dot-size | 44rpx | -
--td-switch-dot-small-size | 36rpx | -
--td-switch-height | 56rpx | -
--td-switch-icon-large-size | 48rpx | -
--td-switch-icon-size | 40rpx | -
--td-switch-icon-small-size | 32rpx | -
--td-switch-label-checked-color | @switch-checked-color | -
--td-switch-label-color | @font-gray-4 | -
--td-switch-label-font-size | 28rpx | -
--td-switch-label-large-font-size | 32rpx | -
--td-switch-label-small-font-size | 24rpx | -
--td-switch-large-height | 64rpx | -
--td-switch-large-radius | calc(@switch-large-height / 2) | -
--td-switch-large-width | 104rpx | -
--td-switch-radius | calc(@switch-height / 2) | -
--td-switch-small-height | 48rpx | -
--td-switch-small-radius | calc(@switch-small-height / 2) | -
--td-switch-small-width | 78rpx | -
--td-switch-unchecked-color | @font-gray-4 | -
--td-switch-unchecked-disabled-color | @bg-color-component-disabled | -
--td-switch-width | 90rpx | -

105
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/switch/README.md Normal file
View File

@@ -0,0 +1,105 @@
---
title: Switch 开关
description: 用于控制某个功能的开启和关闭。
spline: form
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%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-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-82%25-blue" /></span>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-switch": "tdesign-miniprogram/switch/switch"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/ea6Lpim37ISs" 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 }}
### 带描述开关
{{ label }}
### 自定义颜色
{{ color }}
### 开关状态
{{ status }}
### 尺寸
{{ size }}
## API
### Switch Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
custom-value | Array | [true, false] | 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close']。TS 类型：`Array<SwitchValue>` | N
disabled | Boolean | undefined | 是否禁用组件。优先级：Switch.disabled > Form.disabled | N
icon | Array | [] | `0.27.0`。开关的图标；[打开时的图标，关闭时的图标]。TS 类型：`string[]` | N
label | Array | [] | `0.27.0`。开关的标签；[打开时的标签，关闭时的标签]。TS 类型：`string[]` | N
loading | Boolean | false | `0.27.0`。是否处于加载中状态 | N
size | String | medium | `0.27.0`。开关尺寸。可选项：small/medium/large | N
value | String / Number / Boolean | null | 开关值。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N
default-value | String / Number / Boolean | undefined | 开关值。非受控属性。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N
### Switch Events
名称 | 参数 | 描述
-- | -- | --
change | `(value: SwitchValue)` | 数据发生变化时触发
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-switch-checked-color | @brand-color | -
--td-switch-checked-disabled-color | @brand-color-disabled | -
--td-switch-dot-border-color | @bg-color-secondarycontainer | -
--td-switch-dot-horizontal-margin | 6rpx | -
--td-switch-dot-large-size | 52rpx | -
--td-switch-dot-plain-horizontal-margin | 10rpx | -
--td-switch-dot-plain-large-size | 44rpx | -
--td-switch-dot-plain-size | 36rpx | -
--td-switch-dot-plain-small-size | 28rpx | -
--td-switch-dot-shadow | @shadow-1 | -
--td-switch-dot-size | 44rpx | -
--td-switch-dot-small-size | 36rpx | -
--td-switch-height | 56rpx | -
--td-switch-icon-large-size | 48rpx | -
--td-switch-icon-size | 40rpx | -
--td-switch-icon-small-size | 32rpx | -
--td-switch-label-checked-color | @switch-checked-color | -
--td-switch-label-color | @font-gray-4 | -
--td-switch-label-font-size | 28rpx | -
--td-switch-label-large-font-size | 32rpx | -
--td-switch-label-small-font-size | 24rpx | -
--td-switch-large-height | 64rpx | -
--td-switch-large-radius | calc(@switch-large-height / 2) | -
--td-switch-large-width | 104rpx | -
--td-switch-radius | calc(@switch-height / 2) | -
--td-switch-small-height | 48rpx | -
--td-switch-small-radius | calc(@switch-small-height / 2) | -
--td-switch-small-width | 78rpx | -
--td-switch-unchecked-color | @font-gray-4 | -
--td-switch-unchecked-disabled-color | @bg-color-component-disabled | -
--td-switch-width | 90rpx | -

3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/switch/props.d.ts vendored Normal file
View File

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

35
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/switch/props.js Normal file
View File

@@ -0,0 +1,35 @@
const props = {
customValue: {
type: Array,
value: [true, false],
},
disabled: {
type: null,
value: undefined,
},
icon: {
type: Array,
value: [],
},
label: {
type: Array,
value: [],
},
loading: {
type: Boolean,
value: false,
},
size: {
type: String,
value: 'medium',
},
value: {
type: null,
value: null,
},
defaultValue: {
type: null,
value: null,
},
};
export default props;

21
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/switch/switch.d.ts vendored Normal file
View File

@@ -0,0 +1,21 @@
import { SuperComponent } from '../common/src/index';
export default class Switch extends SuperComponent {
externalClasses: string[];
behaviors: string[];
properties: import("./type").TdSwitchProps<import("./type").SwitchValue>;
data: {
prefix: string;
classPrefix: string;
checked: boolean;
};
controlledProps: {
key: string;
event: string;
}[];
observers: {
value(val: any): void;
};
methods: {
handleSwitch(): void;
};
}

53
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/switch/switch.js Normal file
View File

@@ -0,0 +1,53 @@
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 { wxComponent, SuperComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
const { prefix } = config;
const name = `${prefix}-switch`;
let Switch = class Switch extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = ['t-class', 't-class-label', 't-class-body', 't-class-dot'];
this.behaviors = ['wx://form-field'];
this.properties = props;
this.data = {
prefix,
classPrefix: name,
checked: false,
};
this.controlledProps = [
{
key: 'value',
event: 'change',
},
];
this.observers = {
value(val) {
const [activeValue] = this.data.customValue;
this.setData({
checked: val === activeValue,
});
},
};
this.methods = {
handleSwitch() {
const { loading, disabled, value, customValue } = this.data;
const [activeValue, inactiveValue] = customValue;
if (loading || disabled)
return;
this._trigger('change', {
value: value === activeValue ? inactiveValue : activeValue,
});
},
};
}
};
Switch = __decorate([
wxComponent()
], Switch);
export default Switch;

8
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/switch/switch.json Normal file
View File

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

32
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/switch/switch.wxml Normal file
View File

@@ -0,0 +1,32 @@
<wxs src="../common/utils.wxs" module="_" />
<view
style="{{_._style([style, customStyle])}}"
class="class {{ prefix }}-class {{classPrefix}}"
bind:tap="handleSwitch"
aria-checked="{{checked}}"
aria-disabled="{{disabled}}"
aria-role="switch"
>
<view
class="{{_.cls(classPrefix + '__body', [['checked', checked], ['disabled', disabled || loading], size])}} {{prefix}}-class-body"
>
<view
class="{{_.cls(classPrefix + '__dot', [['checked', checked], ['plain', label.length != 2 && icon.length != 2 && !loading], size])}} {{prefix}}-class-dot"
aria-hidden="{{true}}"
>
<view
wx:if="{{label}}"
class="{{_.cls(classPrefix + '__label', [['checked', checked], ['disabled', disabled], size])}} {{prefix}}-class-label"
>
<t-loading wx:if="{{loading}}" inherit-color size="32rpx" />
<text wx:elif="{{label.length == 2}}">{{checked ? label[0] : label[1]}}</text>
<t-icon
wx:elif="{{icon.length == 2}}"
name="{{checked ? icon[0] : icon[1]}}"
t-class="{{_.cls(classPrefix + '__icon', [['checked', checked], size])}}"
/>
</view>
</view>
</view>
</view>

161
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/switch/switch.wxss Normal file
View File

@@ -0,0 +1,161 @@
.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-switch {
display: flex;
align-items: center;
overflow: hidden;
}
.t-switch__label {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
font-size: var(--td-switch-label-font-size, 28rpx);
color: var(--td-switch-label-color, var(--td-bg-color-secondarycontainer-active, var(--td-gray-color-4, #dcdcdc)));
overflow: hidden;
}
.t-switch__label--checked {
color: var(--td-switch-label-checked-color, var(--td-switch-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
}
.t-switch__label--disabled {
color: var(--td-switch-unchecked-disabled-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
}
.t-switch__label--checked.t-switch__label--disabled {
color: var(--td-switch-checked-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
}
.t-switch__label--large {
font-size: var(--td-switch-label-large-font-size, 32rpx);
}
.t-switch__label--small {
font-size: var(--td-switch-label-small-font-size, 24rpx);
}
.t-switch__label:empty {
display: none;
}
.t-switch__icon {
font-size: var(--td-switch-icon-size, 40rpx);
}
.t-switch__icon--large {
font-size: var(--td-switch-icon-large-size, 48rpx);
}
.t-switch__icon--small {
font-size: var(--td-switch-icon-small-size, 32rpx);
}
.t-switch__loading {
color: var(--td-switch-label-checked-color, var(--td-switch-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
}
.t-switch__body {
vertical-align: middle;
width: var(--td-switch-width, 90rpx);
height: var(--td-switch-height, 56rpx);
border-radius: var(--td-switch-radius, calc(var(--td-switch-height, 56rpx) / 2));
background-color: var(--td-switch-unchecked-color, var(--td-bg-color-secondarycontainer-active, var(--td-gray-color-4, #dcdcdc)));
position: relative;
transition: all 0.3s ease;
overflow: hidden;
}
.t-switch__body--checked {
background-color: var(--td-switch-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-switch__body--disabled {
background-color: var(--td-switch-unchecked-disabled-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
}
.t-switch__body--checked.t-switch__body--disabled {
background-color: var(--td-switch-checked-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
}
.t-switch__body--large {
width: var(--td-switch-large-width, 104rpx);
height: var(--td-switch-large-height, 64rpx);
border-radius: var(--td-switch-large-radius, calc(var(--td-switch-large-height, 64rpx) / 2));
}
.t-switch__body--small {
width: var(--td-switch-small-width, 78rpx);
height: var(--td-switch-small-height, 48rpx);
border-radius: var(--td-switch-small-radius, calc(var(--td-switch-small-height, 48rpx) / 2));
}
.t-switch__dot {
position: absolute;
left: var(--td-switch-dot-horizontal-margin, 6rpx);
top: 50%;
width: var(--td-switch-dot-size, 44rpx);
height: var(--td-switch-dot-size, 44rpx);
border-radius: 50%;
background-color: var(--td-text-color-anti, var(--td-font-white-1, #ffffff));
transition: all 0.3s;
transform: translateY(-50%);
box-shadow: var(--td-switch-dot-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)));
}
.t-switch__dot:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border: 1px solid var(--td-switch-dot-border-color, var(--td-gray-color-4, #dcdcdc));
border-radius: 50%;
transform: scale(0.5);
transform-origin: 0 0;
box-sizing: border-box;
}
.t-switch__dot--large {
width: var(--td-switch-dot-large-size, 52rpx);
height: var(--td-switch-dot-large-size, 52rpx);
}
.t-switch__dot--small {
width: var(--td-switch-dot-small-size, 36rpx);
height: var(--td-switch-dot-small-size, 36rpx);
}
.t-switch__dot--checked {
left: calc(var(--td-switch-width, 90rpx) - var(--td-switch-dot-size, 44rpx) - var(--td-switch-dot-horizontal-margin, 6rpx));
}
.t-switch__dot--large.t-switch__dot--checked {
left: calc(var(--td-switch-large-width, 104rpx) - var(--td-switch-dot-large-size, 52rpx) - var(--td-switch-dot-horizontal-margin, 6rpx));
}
.t-switch__dot--small.t-switch__dot--checked {
left: calc(var(--td-switch-small-width, 78rpx) - var(--td-switch-dot-small-size, 36rpx) - var(--td-switch-dot-horizontal-margin, 6rpx));
}
.t-switch__dot--plain:not(.t-switch__dot--checked) {
width: var(--td-switch-dot-plain-size, 36rpx);
height: var(--td-switch-dot-plain-size, 36rpx);
left: var(--td-switch-dot-plain-horizontal-margin, 10rpx);
}
.t-switch__dot--large.t-switch__dot--plain:not(.t-switch__dot--checked) {
width: var(--td-switch-dot-plain-large-size, 44rpx);
height: var(--td-switch-dot-plain-large-size, 44rpx);
}
.t-switch__dot--small.t-switch__dot--plain:not(.t-switch__dot--checked) {
width: var(--td-switch-dot-plain-small-size, 28rpx);
height: var(--td-switch-dot-plain-small-size, 28rpx);
}

35
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/switch/type.d.ts vendored Normal file
View File

@@ -0,0 +1,35 @@
export interface TdSwitchProps<T = SwitchValue> {
customValue?: {
type: ArrayConstructor;
value?: Array<SwitchValue>;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
icon?: {
type: ArrayConstructor;
value?: string[];
};
label?: {
type: ArrayConstructor;
value?: string[];
};
loading?: {
type: BooleanConstructor;
value?: boolean;
};
size?: {
type: StringConstructor;
value?: 'small' | 'medium' | 'large';
};
value?: {
type: null;
value?: SwitchValue;
};
defaultValue?: {
type: null;
value?: SwitchValue;
};
}
export declare type SwitchValue = string | number | boolean;

1
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/switch/type.js Normal file
View File

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