lingxiao/mini-yu
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
lingxiao865
2026-02-10 08:05:03 +08:00
commit c5af079d8c
1094 changed files with 97530 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
uni_modules/tdesign-uniapp/components/switch/README.en-US.md Normal file
View File

@@ -0,0 +1,70 @@
:: BASE_DOC ::
## API
### Switch Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
custom-value | Array | [true, false] | Typescript：`Array<SwitchValue>` | N
disabled | Boolean | undefined | \- | N
icon | Array | [] | Typescript：`string[]` | N
label | Array | [] | Typescript：`string[]` | N
loading | Boolean | false | \- | N
size | String | medium | options: small/medium/large | N
value | String / Number / Boolean | - | `v-model:value` is supported。Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/switch/type.ts) | N
default-value | String / Number / Boolean | - | uncontrolled property。Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/switch/type.ts) | N
### Switch Events
name | params | description
-- | -- | --
change | `(context: { value: SwitchValue })` | \-
### Switch External Classes
className | Description
-- | --
t-class | \-
t-class-body | \-
t-class-dot | \-
t-class-label | \-
### 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-disabled-color | @font-white-1 | -
--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 | @bg-color-secondarycontainer-active | -
--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-loading-color | @brand-color | -
--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 | @bg-color-secondarycontainer-active | -
--td-switch-unchecked-disabled-color | @bg-color-component-disabled | -
--td-switch-width | 90rpx | -

104
uni_modules/tdesign-uniapp/components/switch/README.md Normal file
View File

@@ -0,0 +1,104 @@
---
title: Switch 开关
description: 用于控制某个功能的开启和关闭。
spline: form
isComponent: true
---
## 引入
可在 `main.ts` 或在需要使用的页面或组件中引入。
```js
import TSwitch from '@tdesign/uniapp/switch/switch.vue';
```
### 基础开关
{{ base }}
### 带描述开关
{{ label }}
### 自定义颜色
{{ color }}
### 开关状态
{{ status }}
### 尺寸
{{ size }}
## API
### Switch Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
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 | [] | 开关的图标；[打开时的图标，关闭时的图标]。TS 类型：`string[]` | N
label | Array | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 。TS 类型：`string[]` | N
loading | Boolean | false | 是否处于加载中状态 | N
size | String | medium | 开关尺寸。可选项：small/medium/large | N
value | String / Number / Boolean | - | 开关值。支持语法糖 `v-model:value`。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/switch/type.ts) | N
default-value | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/switch/type.ts) | N
### Switch Events
名称 | 参数 | 描述
-- | -- | --
change | `(context: { value: SwitchValue })` | 数据发生变化时触发
### Switch External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-body | 描述文本样式类
t-class-dot | 滑块样式类
t-class-label | 开关内容样式类
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-switch-checked-color | @brand-color | -
--td-switch-checked-disabled-color | @brand-color-disabled | -
--td-switch-dot-disabled-color | @font-white-1 | -
--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 | @bg-color-secondarycontainer-active | -
--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-loading-color | @brand-color | -
--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 | @bg-color-secondarycontainer-active | -
--td-switch-unchecked-disabled-color | @bg-color-component-disabled | -
--td-switch-width | 90rpx | -

53
uni_modules/tdesign-uniapp/components/switch/props.ts Normal file
View File

@@ -0,0 +1,53 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
import type { TdSwitchProps } from './type';
export default {
/** 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close'] */
customValue: {
type: Array,
default: (): TdSwitchProps['customValue'] => [true, false],
},
/** 是否禁用组件。优先级：Switch.disabled > Form.disabled */
disabled: {
type: Boolean,
default: undefined,
},
/** 开关的图标；[打开时的图标，关闭时的图标] */
icon: {
type: Array,
default: (): TdSwitchProps['icon'] => [],
},
/** 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] */
label: {
type: Array,
default: (): TdSwitchProps['label'] => [],
},
/** 是否处于加载中状态 */
loading: Boolean,
/** 开关尺寸 */
size: {
type: String,
default: 'medium' as TdSwitchProps['size'],
validator(val: TdSwitchProps['size']): boolean {
if (!val) return true;
return ['small', 'medium', 'large'].includes(val);
},
},
/** 开关值 */
value: {
type: [String, Number, Boolean],
},
/** 开关值，非受控属性 */
defaultValue: {
type: [String, Number, Boolean],
},
/** 数据发生变化时触发 */
onChange: {
type: Function,
default: () => ({}),
},
};

123
uni_modules/tdesign-uniapp/components/switch/switch.css Normal file
View File

@@ -0,0 +1,123 @@
.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 {
--td-loading-color: var(--td-switch-loading-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--disabled {
background-color: var(--td-switch-dot-disabled-color, var(--td-font-white-1, #ffffff));
}
.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);
}

122
uni_modules/tdesign-uniapp/components/switch/switch.vue Normal file
View File

@@ -0,0 +1,122 @@
<template>
<view
:style="tools._style([customStyle])"
:class="tClass + ' ' + classPrefix"
:aria-checked="checked"
:aria-disabled="disabled"
aria-role="switch"
@click="handleSwitch"
>
<view :class="tools.cls(classPrefix + '__body', [['checked', checked], ['disabled', disabled || loading], size]) + ' ' + tClassBody">
<view
:class="
tools.cls(classPrefix + '__dot', [['checked', checked], ['disabled', disabled], ['plain', label.length != 2 && icon.length != 2 && !loading], size]) +
' ' +
tClassDot
"
:aria-hidden="true"
>
<view
v-if="label"
:class="tools.cls(classPrefix + '__label', [['checked', checked], ['disabled', disabled], size]) + ' ' + tClassLabel"
>
<t-loading
v-if="loading"
inherit-color
size="32rpx"
/>
<text v-else-if="label.length == 2">
{{ checked ? label[0] : label[1] }}
</text>
<t-icon
v-else-if="icon.length == 2"
:name="checked ? icon[0] : icon[1]"
:t-class="tools.cls(classPrefix + '__icon', [['checked', checked], size])"
/>
</view>
</view>
</view>
</view>
</template>
<script>
import TIcon from '../icon/icon';
import TLoading from '../loading/loading';
import { uniComponent } from '../common/src/index';
import { prefix } from '../common/config';
import { coalesce } from '../common/utils';
import props from './props';
import tools from '../common/utils.wxs';
const name = `${prefix}-switch`;
export default uniComponent({
name,
options: {
styleIsolation: 'shared',
},
controlledProps: [
{
key: 'value',
event: 'change',
},
],
externalClasses: [
`${prefix}-class`,
`${prefix}-class-label`,
`${prefix}-class-body`,
`${prefix}-class-dot`,
],
components: {
TIcon,
TLoading,
},
props: {
...props,
},
emits: ['change'],
data() {
return {
prefix,
classPrefix: name,
checked: false,
tools,
dataValue: coalesce(this.value, this.defaultValue),
};
},
watch: {
value: {
handler(v) {
this.dataValue = v;
},
immediate: true,
},
dataValue: {
handler(val) {
const [activeValue] = this.customValue;
this.checked = val === activeValue;
},
immediate: true,
},
},
mounted() {
},
methods: {
handleSwitch() {
const { loading, disabled, dataValue, customValue } = this;
const [activeValue, inactiveValue] = customValue;
if (loading || disabled) return;
this._trigger('change', {
value: dataValue === activeValue ? inactiveValue : activeValue,
});
},
},
});
</script>
<style scoped>
@import './switch.css';
</style>

51
uni_modules/tdesign-uniapp/components/switch/type.ts Normal file
View File

@@ -0,0 +1,51 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
export interface TdSwitchProps<T = SwitchValue> {
/**
* 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close']
* @default [true, false]
*/
customValue?: Array<SwitchValue>;
/**
* 是否禁用组件。优先级：Switch.disabled > Form.disabled
*/
disabled?: boolean;
/**
* 开关的图标；[打开时的图标，关闭时的图标]
* @default []
*/
icon?: string[];
/**
* 开关内容，[开启时内容，关闭时内容]。示例：['开', '关']
* @default []
*/
label?: string[];
/**
* 是否处于加载中状态
* @default false
*/
loading?: boolean;
/**
* 开关尺寸
* @default medium
*/
size?: 'small' | 'medium' | 'large';
/**
* 开关值
*/
value?: SwitchValue;
/**
* 开关值，非受控属性
*/
defaultValue?: SwitchValue;
/**
* 数据发生变化时触发
*/
onChange?: (context: { value: SwitchValue }) => void;
}
export type SwitchValue = string | number | boolean;