diff --git a/src/switch/_example-composition/shape.vue b/src/switch/_example-composition/shape.vue new file mode 100644 index 000000000..0628cfbc0 --- /dev/null +++ b/src/switch/_example-composition/shape.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/switch/_example/shape.vue b/src/switch/_example/shape.vue new file mode 100644 index 000000000..89edb2d4d --- /dev/null +++ b/src/switch/_example/shape.vue @@ -0,0 +1,19 @@ + + + diff --git a/src/switch/_usage/props.json b/src/switch/_usage/props.json index 22c1b97aa..ec4082a7d 100644 --- a/src/switch/_usage/props.json +++ b/src/switch/_usage/props.json @@ -11,6 +11,25 @@ "defaultValue": false, "options": [] }, + { + "name": "shape", + "type": "enum", + "defaultValue": "circle", + "options": [ + { + "label": "circle", + "value": "circle" + }, + { + "label": "round", + "value": "round" + }, + { + "label": "line", + "value": "line" + } + ] + }, { "name": "size", "type": "enum", @@ -36,4 +55,4 @@ "defaultValue": false, "options": [] } -] \ No newline at end of file +] diff --git a/src/switch/props.ts b/src/switch/props.ts index eee7865ee..22d2c2bff 100644 --- a/src/switch/props.ts +++ b/src/switch/props.ts @@ -26,6 +26,14 @@ export default { }, /** 是否处于加载中状态 */ loading: Boolean, + /** 开关形状。`line` 形态不展示开关内容 `label` */ + shape: { + type: String as PropType, + default: 'circle' as TdSwitchProps['shape'], + validator(val: TdSwitchProps['shape']): boolean { + return ['circle', 'round', 'line'].includes(val); + }, + }, /** 开关尺寸 */ size: { type: String as PropType, diff --git a/src/switch/switch.en-US.md b/src/switch/switch.en-US.md index 7332d2ecc..8c0abd78e 100644 --- a/src/switch/switch.en-US.md +++ b/src/switch/switch.en-US.md @@ -10,6 +10,7 @@ customValue | Array | - | Typescript:`Array` | N disabled | Boolean | - | \- | N label | Array / Slot / Function | [] | Typescript:`Array \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N loading | Boolean | false | \- | N +shape | String | circle | Switch shape. `label` is not rendered when shape is `line`. Options: circle/round/line | N size | String | medium | options:small/medium/large | N value | String / Number / Boolean | - | `v-model` is supported。Typescript:`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript:`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N diff --git a/src/switch/switch.md b/src/switch/switch.md index 541bb8a97..6669691b7 100644 --- a/src/switch/switch.md +++ b/src/switch/switch.md @@ -10,6 +10,7 @@ customValue | Array | - | 用于自定义开关的值,[打开时的值,关 disabled | Boolean | - | 是否禁用组件 | N label | Array / Slot / Function | [] | 开关内容,[开启时内容,关闭时内容]。示例:['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型:`Array \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N loading | Boolean | false | 是否处于加载中状态 | N +shape | String | circle | 开关形状。`line` 形态不展示开关内容 `label`。可选项:circle/round/line | N size | String | medium | 开关尺寸。可选项:small/medium/large | N value | String / Number / Boolean | - | 开关值。支持语法糖 `v-model`。TS 类型:`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型:`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N diff --git a/src/switch/switch.tsx b/src/switch/switch.tsx index a513188a1..b8900dd32 100755 --- a/src/switch/switch.tsx +++ b/src/switch/switch.tsx @@ -29,6 +29,7 @@ export default mixins(classPrefixMixins).extend({ classes(): ClassName { return [ `${this.componentName}`, + `${this.componentName}--shape-${this.shape}`, this.commonSizeClassName[this.size], { [this.commonStatusClassName.disabled]: this.tDisabled, @@ -129,23 +130,21 @@ export default mixins(classPrefixMixins).extend({ }, }, render(): VNode { - const { - loading, content, nodeClasses, classes, toggle, contentClasses, - } = this; + const { loading, nodeClasses, classes, toggle, contentClasses } = this; let switchContent: TNodeReturnValue; let loadingContent: TNodeReturnValue; if (loading) { loadingContent = ; - } else if (content) { - switchContent = content; + } else if (this.shape !== 'line' && this.content) { + switchContent = this.content; } return (
{loadingContent} -
{switchContent}
+ {this.shape !== 'line' &&
{switchContent}
}
); }, diff --git a/src/switch/type.ts b/src/switch/type.ts index 33b32458b..9b090f65e 100644 --- a/src/switch/type.ts +++ b/src/switch/type.ts @@ -31,6 +31,11 @@ export interface TdSwitchProps { * @default false */ loading?: boolean; + /** + * 开关形状。`line` 形态不展示开关内容 `label` + * @default circle + */ + shape?: 'circle' | 'round' | 'line'; /** * 开关尺寸 * @default medium