diff --git a/devui/switch/__tests__/switch.spec.ts b/devui/switch/__tests__/switch.spec.ts
index dd9f3358df09db7100fd3f0e27b60bc465580793..0871b575d067c61d732d71e27c4e2703f935618b 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 8e52543b55b1dc5293a950507e0a50b882b2b1e8..c1c22ae1f1f5ea801a9d9c68aaf343407e848bd0 100644
--- a/devui/switch/src/switch.scss
+++ b/devui/switch/src/switch.scss
@@ -47,9 +47,14 @@
     color: $devui-global-bg;
 
     .devui-switch-inner {
+      color: #ffffff;
+      font-weight: 700;
+      display: flex;
       width: 100%;
       height: 100%;
-      text-align: center;
+      align-items: center;
+      justify-content: center;
+      float: right;
     }
   }
 
@@ -73,7 +78,7 @@
     left: 19px;
   }
 
-  &.devui-switch-lg {
+  &.devui-switch-large {
     width: 58px;
     height: 30px;
     border-radius: math.div(32px, 2);
@@ -101,7 +106,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 5581d4a9eeaa08f2154082d2935993dff37ef5ef..95e6902f15ccfd28265403f811b892d179ec71b8 100644
--- a/devui/switch/src/switch.tsx
+++ b/devui/switch/src/switch.tsx
@@ -1,10 +1,10 @@
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, renderSlot, useSlots } from 'vue';
 import './switch.scss';
 
 const switchProps = {
   size: {
-    type: String as PropType<'sm' | '' | 'lg'>,
-    default: ''
+    type: String as PropType<'small' | 'middle' | 'large'>,
+    default: 'middle'
   },
   color: {
     type: String,
@@ -63,7 +63,7 @@ export default defineComponent({
     };
   },
 
-  render () {
+  render() {
     const {
       size,
       checked,
@@ -71,7 +71,6 @@ export default defineComponent({
       color,
       toggle
     } = this;
-
     const outerCls = {
       'devui-switch': true,
       [`devui-switch-${size}`]: size !== '',
@@ -83,12 +82,14 @@ export default defineComponent({
       `border-color: ${checked && !disabled ? color : ''}`
     ];
 
+    const checkedContent = renderSlot(useSlots(), 'checkedContent')
+    const uncheckedContent = renderSlot(useSlots(), 'uncheckedContent')
     return (
       <span class={outerCls} style={outerStyle} onClick={toggle}>
         <span class="devui-switch-inner-wrapper">
-            <div class="devui-switch-inner">
-              { checked ? this.$slots.checkedContent?.() : this.$slots.uncheckedContent?.() }
-            </div>
+          <div class="devui-switch-inner">
+            {checked ? checkedContent : uncheckedContent}
+          </div>
         </span>
         <small></small>
       </span>
diff --git a/docs/components/switch/index.md b/docs/components/switch/index.md
index 5845385fac5109764c7caea9b2aaf13a095b1ee1..fed087bd7fd61c09c353254cc8bad4727f8d664c 100644
--- a/docs/components/switch/index.md
+++ b/docs/components/switch/index.md
@@ -14,7 +14,7 @@
 
 <br />
 
-<d-switch v-model:checked="checkedSmall" size="sm"></d-switch>
+<d-switch v-model:checked="checkedSmall" size="small"></d-switch>
 
 <br />
 <br />
@@ -36,16 +36,63 @@
 
 <br />
 
-<d-switch v-model:checked="checkedLarge" size="lg"></d-switch>
+<d-switch v-model:checked="checkedLarge" size="large"></d-switch>
+<br />
+<br />
 
-```html
-<d-switch v-model:checked="checkedSmall" size="sm"></d-switch>
-<d-switch v-model:checked="uncheckedMiddle"></d-switch>
-<d-switch v-model:checked="checkedMiddle"></d-switch>
-<d-switch v-model:checked="checkedLarge" size="lg"></d-switch>
-```
+### disabled
+
+<br />
+
+<d-switch v-model:checked="checkedDisabled" :disabled='true'></d-switch>
+<d-switch v-model:checked="checkedDisabled1" :disabled='true'></d-switch>
+
+<br />
+<br />
+
+### 自定义样式
 
-<script lang="ts">
+<br />
+<d-switch v-model:checked="checkedColor" color="#FECC55"></d-switch>
+
+<br />
+<d-switch v-model:checked="checkedContent">
+  <template #checkedContent>开</template>
+  <template #uncheckedContent>关</template>
+</d-switch>
+
+<br />
+<d-switch color="#50D4AB" v-model:checked="checkedIcon">
+  <template #checkedContent>
+    <i class="icon-right"></i>
+  </template>
+  <template #uncheckedContent>
+    <i class="icon-error"></i>
+  </template>
+</d-switch>
+
+
+``` html
+  <d-switch size="small"></d-switch>
+  <d-switch v-model:checked="uncheckedMiddle"></d-switch>
+  <d-switch v-model:checked="checkedMiddle"></d-switch>
+  <d-switch v-model:checked="checkedLarge" size="large"></d-switch>
+  <d-switch v-model:checked="checkedDisabled" :disabled="true"></d-switch>
+  <d-switch v-model:checked="checkedDisabled" :color="#FECC55"></d-switch>
+  <d-switch v-model:checked="checkedContent">
+    <template #checkedContent>开</template>
+    <template #uncheckedContent>关</template>
+  </d-switch>
+  <d-switch color="#50D4AB" v-model:checked="checkedIcon">
+    <template #checkedContent>
+      <i class="icon-right"></i>
+    </template>
+    <template #uncheckedContent>
+      <i class="icon-error"></i>
+    </template>
+  </d-switch>
+```
+<script>
 import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
@@ -54,13 +101,40 @@ export default defineComponent({
     const uncheckedMiddle = ref(false)
     const checkedMiddle = ref(true)
     const checkedLarge = ref(true)
-    
+    const checkedDisabled = ref(true)
+    const checkedDisabled1 = ref(false)
+    const checkedColor = ref(true)
+    const checkedContent = ref(false)
+    const checkedIcon = ref(true)
+
     return {
       checkedSmall,
       uncheckedMiddle,
       checkedMiddle,
       checkedLarge,
+      checkedDisabled,
+      checkedDisabled1,
+      checkedColor,
+      checkedContent,
+      checkedIcon
     }
   }
 })
 </script>
+
+### d-switch 参数
+
+|       参数       |            类型                   | 默认  |               说明                    | 跳转 Demo             
+| :--------------: | :--------------------------: | :---: | :-----------------------: | :--------------------- |
+|       size       |             `small \| middle \| large`              |  `middle`   |             可选，开关尺寸大小          | [基本用法](#基本用法) 
+|      color       |                   `string`                    |  --   |             可选，开关打开时的自定义颜色      | [自定义样式](#自定义样式)
+|     checked      |                   `boolean`                   | false |              可选，开关是否打开，默认关闭      | [基本用法](#基本用法) 
+|     disabled     |                   `boolean`                   | false |                    可选，是否禁用开关          | [基本用法](#基本用法) 
+|  checkedContent  |            `string \| HTMLElement`            |  ''  |             可选，开关打开时说明               | [自定义样式](#自定义样式)
+| uncheckedContent |             `string \| HTMLElement`             |  ''   |             可选，开关关闭时说明                | [自定义样式](#自定义样式)
+
+### d-switch 事件
+
+|  事件  |          类型           | 说明                                  |
+| :----: | :---------------------: | :------------------------------------ |
+| change | `EventEmitter<boolean>` | 可选,开关打开返回 true,关闭返回 false |