diff --git a/packages/common b/packages/common index 5aedfdf7ab..581f565e6d 160000 --- a/packages/common +++ b/packages/common @@ -1 +1 @@ -Subproject commit 5aedfdf7ab0457141b0a886d2126e22bbdb42cae +Subproject commit 581f565e6d55091fac143775d461f2c47c51365c diff --git a/packages/components/switch/_example/theme.vue b/packages/components/switch/_example/theme.vue new file mode 100644 index 0000000000..6b02a5e338 --- /dev/null +++ b/packages/components/switch/_example/theme.vue @@ -0,0 +1,19 @@ + diff --git a/packages/components/switch/_usage/props.json b/packages/components/switch/_usage/props.json index 881604decd..8c4f7c4d60 100644 --- a/packages/components/switch/_usage/props.json +++ b/packages/components/switch/_usage/props.json @@ -11,6 +11,25 @@ "defaultValue": false, "options": [] }, + { + "name": "theme", + "type": "enum", + "defaultValue": "round", + "options": [ + { + "label": "round", + "value": "round" + }, + { + "label": "rectangle", + "value": "rectangle" + }, + { + "label": "line", + "value": "line" + } + ] + }, { "name": "size", "type": "enum", diff --git a/packages/components/switch/props.ts b/packages/components/switch/props.ts index 233173bd12..c4fdf51842 100644 --- a/packages/components/switch/props.ts +++ b/packages/components/switch/props.ts @@ -8,7 +8,7 @@ import { TdSwitchProps } from './type'; import { PropType } from 'vue'; export default { - /** Switch 切换状态前的回调方法，常用于需要发起异步请求的场景，回调返回值支持布尔和 Promise 类型，返回`false`或 Promise reject不继续执行change，否则则继续执行。 */ + /** Switch 切换状态前的回调方法，常用于需要发起异步请求的场景，回调返回值支持布尔和 Promise 类型，返回`false`或 Promise reject不继续执行change，否则则继续执行 */ beforeChange: { type: Function as PropType, }, @@ -37,6 +37,15 @@ export default { return ['small', 'medium', 'large'].includes(val); }, }, + /** 组件风格。round为圆形，rectangle为矩形，line为线形 */ + theme: { + type: String as PropType, + default: 'round' as TdSwitchProps['theme'], + validator(val: TdSwitchProps['theme']): boolean { + if (!val) return true; + return ['round', 'rectangle', 'line'].includes(val); + }, + }, /** 开关值 */ value: { type: [String, Number, Boolean] as PropType, diff --git a/packages/components/switch/switch.en-US.md b/packages/components/switch/switch.en-US.md index ac48c1a82d..b0313a6429 100644 --- a/packages/components/switch/switch.en-US.md +++ b/packages/components/switch/switch.en-US.md @@ -1,19 +1,21 @@ :: BASE_DOC :: ## API + ### Switch Props name | type | default | description | required -- | -- | -- | -- | -- -beforeChange | Function | - | stop checked change。Typescript：`() => boolean \| Promise` | N -customValue | Array | - | Typescript：`Array` | N +beforeChange | Function | - | Typescript: `() => boolean \| Promise` | N +customValue | Array | - | Typescript: `Array` | N disabled | Boolean | undefined | \- | N -label | Array / Slot / Function | [] | Typescript：`Array \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +label | Array / Slot / Function | [] | Typescript: `Array \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N loading | Boolean | false | \- | N size | String | medium | options: small/medium/large | N -value | String / Number / Boolean | - | `v-model` and `v-model:value` is supported。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N -defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N -onChange | Function | | Typescript：`(value: T, context: { e: MouseEvent }) => void`
| N +theme | String | round | options: round/rectangle/line | N +value | String / Number / Boolean | - | `v-model` and `v-model:value` is supported。Typescript: `T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N +defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript: `T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N +onChange | Function | | Typescript: `(value: T, context: { e: MouseEvent }) => void`
| N ### Switch Events diff --git a/packages/components/switch/switch.md b/packages/components/switch/switch.md index c71c696f28..fda2e4c1b4 100644 --- a/packages/components/switch/switch.md +++ b/packages/components/switch/switch.md @@ -1,9 +1,13 @@ :: BASE_DOC :: +### 不同风格的开关 + +{{ theme }} ## API + ### Switch Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- beforeChange | Function | - | Switch 切换状态前的回调方法，常用于需要发起异步请求的场景，回调返回值支持布尔和 Promise 类型，返回`false`或 Promise reject不继续执行change，否则则继续执行。TS 类型：`() => boolean \| Promise` | N customValue | Array | - | 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close']。TS 类型：`Array` | N @@ -11,6 +15,7 @@ disabled | Boolean | undefined | 是否禁用组件。优先级：Switch.disable label | Array / Slot / Function | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N loading | Boolean | false | 是否处于加载中状态 | N size | String | medium | 开关尺寸。可选项：small/medium/large | N +theme | String | round | 组件风格。round为圆形，rectangle为矩形，line为线形。可选项：round/rectangle/line | N value | String / Number / Boolean | - | 开关值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N onChange | Function | | TS 类型：`(value: T, context: { e: MouseEvent }) => void`
数据发生变化时触发 | N diff --git a/packages/components/switch/switch.tsx b/packages/components/switch/switch.tsx index 65d9f84d89..f4625ed6f6 100755 --- a/packages/components/switch/switch.tsx +++ b/packages/components/switch/switch.tsx @@ -66,6 +66,8 @@ export default defineComponent({ [STATUS.value.disabled]: disabled.value, [STATUS.value.loading]: props.loading, [STATUS.value.checked]: innerValue.value === activeValue.value || props.modelValue === activeValue.value, + [`${COMPONENT_NAME.value}--line`]: props.theme === 'line', + [`${COMPONENT_NAME.value}--rectangle`]: props.theme === 'rectangle', }, ]); const nodeClasses = computed(() => { @@ -100,6 +102,8 @@ export default defineComponent({ ); const content = computed(() => { + if (props.theme === 'line') return; + if (isFunction(props.label)) { return props.label(h, { value: innerValue.value }); } diff --git a/packages/components/switch/type.ts b/packages/components/switch/type.ts index 3308048a92..583a430362 100644 --- a/packages/components/switch/type.ts +++ b/packages/components/switch/type.ts @@ -4,11 +4,11 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TNode } from '../common'; +import type { TNode } from '../common'; export interface TdSwitchProps { /** - * Switch 切换状态前的回调方法，常用于需要发起异步请求的场景，回调返回值支持布尔和 Promise 类型，返回`false`或 Promise reject不继续执行change，否则则继续执行。 + * Switch 切换状态前的回调方法，常用于需要发起异步请求的场景，回调返回值支持布尔和 Promise 类型，返回`false`或 Promise reject不继续执行change，否则则继续执行 */ beforeChange?: () => boolean | Promise; /** @@ -34,6 +34,11 @@ export interface TdSwitchProps { * @default medium */ size?: 'small' | 'medium' | 'large'; + /** + * 组件风格。round为圆形，rectangle为矩形，line为线形 + * @default round + */ + theme?: 'round' | 'rectangle' | 'line'; /** * 开关值 */