From 7980dd2263c0e54a2e5904d98d42c3c28467901a Mon Sep 17 00:00:00 2001 From: MICD Date: Tue, 12 Oct 2021 17:33:09 +0800 Subject: [PATCH 1/4] =?UTF-8?q?docs(switch):=20=E4=BC=98=E5=8C=96switch?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/switch/src/switch.tsx | 24 +++++++++---- docs/components/switch/index.md | 61 ++++++++++++++++++++++++++++----- 2 files changed, 70 insertions(+), 15 deletions(-) diff --git a/devui/switch/src/switch.tsx b/devui/switch/src/switch.tsx index 5581d4a9..0800dcf5 100644 --- a/devui/switch/src/switch.tsx +++ b/devui/switch/src/switch.tsx @@ -3,8 +3,8 @@ import './switch.scss'; const switchProps = { size: { - type: String as PropType<'sm' | '' | 'lg'>, - default: '' + type: String as PropType<'sm' | 'middle' | 'lg'>, + default: 'middle' }, color: { type: String, @@ -18,6 +18,14 @@ const switchProps = { type: Boolean, default: false }, + checkedContent: { + type: String, + default: '' + }, + uncheckedContent: { + type: String, + default: '' + }, beforeChange: { type: Function as PropType<(v: boolean) => boolean | Promise>, default: undefined @@ -63,13 +71,15 @@ export default defineComponent({ }; }, - render () { + render() { const { size, checked, disabled, color, - toggle + toggle, + checkedContent, + uncheckedContent } = this; const outerCls = { @@ -86,9 +96,9 @@ export default defineComponent({ return ( -
- { checked ? this.$slots.checkedContent?.() : this.$slots.uncheckedContent?.() } -
+
+ {checked ? checkedContent : uncheckedContent} +
diff --git a/docs/components/switch/index.md b/docs/components/switch/index.md index 5845385f..17a83c09 100644 --- a/docs/components/switch/index.md +++ b/docs/components/switch/index.md @@ -37,15 +37,37 @@
+
+
-```html - - - - -``` +### disabled + +
+ + + +
+
- + +### d-switch 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo +| :--------------: | :--------------------------: | :---: | :-----------------------: | :--------------------- | +| size | `sm \| middle \| lg` | `middle` | 可选，开关尺寸大小 | [基本用法](#基本用法) +| color | `string` | -- | 可选，开关打开时的自定义颜色 | [自定义样式](#自定义样式) +| checked | `boolean` | false | 可选，开关是否打开，默认关闭 | [基本用法](#基本用法) +| disabled | `boolean` | false | 可选，是否禁用开关 | [基本用法](#基本用法) +| checkedContent | `string` | '' | 可选，开关打开时说明 | [自定义样式](#自定义样式) +| uncheckedContent | `string` | '' | 可选，开关关闭时说明 | [自定义样式](#自定义样式) + +### d-switch 事件 + +| 事件 | 类型 | 说明 | +| :----: | :---------------------: | :------------------------------------ | +| change | `EventEmitter` | 可选,开关打开返回 true,关闭返回 false | -- Gitee From d717eeadd6fd19d225f6e56f06390e2b73a13d29 Mon Sep 17 00:00:00 2001 From: MICD Date: Thu, 14 Oct 2021 17:37:59 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=8F=92?= =?UTF-8?q?=E6=A7=BD=E6=8F=92=E6=A7=BD=E6=A8=A1=E5=BC=8F=E3=80=81=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E5=B0=BA=E5=AF=B8=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/switch/__tests__/switch.spec.ts | 4 +-- devui/switch/src/switch.scss | 4 +-- devui/switch/src/switch.tsx | 19 +++-------- docs/components/switch/index.md | 45 ++++++++++++++++++++++----- 4 files changed, 46 insertions(+), 26 deletions(-) diff --git a/devui/switch/__tests__/switch.spec.ts b/devui/switch/__tests__/switch.spec.ts index dd9f3358..0871b575 100644 --- a/devui/switch/__tests__/switch.spec.ts +++ b/devui/switch/__tests__/switch.spec.ts @@ -52,14 +52,14 @@ describe('d-switch', () => { it('switch size work', async () => { const wrapper = mount(DSwitch, { props: { - size: 'sm' + size: 'small' } }); expect(wrapper.classes()).toContain('devui-switch-sm'); await wrapper.setProps({ - size: 'lg' + size: 'large' }); expect(wrapper.classes()).not.toContain('devui-switch-sm'); expect(wrapper.classes()).toContain('devui-switch-lg'); diff --git a/devui/switch/src/switch.scss b/devui/switch/src/switch.scss index 8e52543b..73b2b55a 100644 --- a/devui/switch/src/switch.scss +++ b/devui/switch/src/switch.scss @@ -73,7 +73,7 @@ left: 19px; } - &.devui-switch-lg { + &.devui-switch-large { width: 58px; height: 30px; border-radius: math.div(32px, 2); @@ -101,7 +101,7 @@ } } - &.devui-switch-sm { + &.devui-switch-small { width: 30px; height: 14px; border-radius: math.div(16px, 2); diff --git a/devui/switch/src/switch.tsx b/devui/switch/src/switch.tsx index 0800dcf5..95e6902f 100644 --- a/devui/switch/src/switch.tsx +++ b/devui/switch/src/switch.tsx @@ -1,9 +1,9 @@ -import { defineComponent, PropType } from 'vue'; +import { defineComponent, PropType, renderSlot, useSlots } from 'vue'; import './switch.scss'; const switchProps = { size: { - type: String as PropType<'sm' | 'middle' | 'lg'>, + type: String as PropType<'small' | 'middle' | 'large'>, default: 'middle' }, color: { @@ -18,14 +18,6 @@ const switchProps = { type: Boolean, default: false }, - checkedContent: { - type: String, - default: '' - }, - uncheckedContent: { - type: String, - default: '' - }, beforeChange: { type: Function as PropType<(v: boolean) => boolean | Promise>, default: undefined @@ -77,11 +69,8 @@ export default defineComponent({ checked, disabled, color, - toggle, - checkedContent, - uncheckedContent + toggle } = this; - const outerCls = { 'devui-switch': true, [`devui-switch-${size}`]: size !== '', @@ -93,6 +82,8 @@ export default defineComponent({ `border-color: ${checked && !disabled ? color : ''}` ]; + const checkedContent = renderSlot(useSlots(), 'checkedContent') + const uncheckedContent = renderSlot(useSlots(), 'uncheckedContent') return ( diff --git a/docs/components/switch/index.md b/docs/components/switch/index.md index 17a83c09..bc47285f 100644 --- a/docs/components/switch/index.md +++ b/docs/components/switch/index.md @@ -14,7 +14,7 @@
- +

@@ -36,7 +36,7 @@
- +

@@ -45,6 +45,7 @@
+

@@ -55,7 +56,20 @@
- + + + + + +
+ + + + ``` html @@ -65,7 +79,18 @@ - + + + + + + + + ```