From 8acc7d0076c51ffeab15ad8ceec82d5fcb52cfa8 Mon Sep 17 00:00:00 2001
From: MICD <www.728988492@qq.com>
Date: Thu, 21 Oct 2021 10:14:38 +0800
Subject: [PATCH] =?UTF-8?q?docs(switch):=20=E6=96=87=E6=A1=A3demo=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BAdemoblock=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/switch/index.md | 153 +++++++++++++-------------------
 1 file changed, 64 insertions(+), 89 deletions(-)

diff --git a/docs/components/switch/index.md b/docs/components/switch/index.md
index fed087bd..6420f1d9 100644
--- a/docs/components/switch/index.md
+++ b/docs/components/switch/index.md
@@ -6,63 +6,70 @@
 
 当两种状态需要来回切换控制时，比如启用/禁用。
 
-### 基本用法
+### size
 
-<br />
-
-#### Small
-
-<br />
-
-<d-switch v-model:checked="checkedSmall" size="small"></d-switch>
-
-<br />
-<br />
-
-#### Middle
-
-<br />
-
-<d-switch v-model:checked="uncheckedMiddle"></d-switch>
-
-<br />
-
-<d-switch v-model:checked="checkedMiddle"></d-switch>
-
-<br />
-<br />
-
-#### Large
-
-<br />
+:::demo size可选：`small | middle | large`，默认为middle
+```vue
+<template>
+  <d-switch v-model:checked="checkedSmall" size="small"></d-switch>
+  <d-switch v-model:checked="uncheckedMiddle" ></d-switch>
+  <d-switch v-model:checked="checkedLarge" size="large"></d-switch>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
 
-<d-switch v-model:checked="checkedLarge" size="large"></d-switch>
-<br />
-<br />
+export default defineComponent({
+  setup() {
+    const checkedSmall = ref(true)
+    const uncheckedMiddle = ref(false)
+    const checkedLarge = ref(true)
+    return {
+      checkedSmall,
+      uncheckedMiddle,
+      checkedLarge
+    }
+  }
+})
+</script>
+```
+:::
 
 ### disabled
 
-<br />
-
-<d-switch v-model:checked="checkedDisabled" :disabled='true'></d-switch>
-<d-switch v-model:checked="checkedDisabled1" :disabled='true'></d-switch>
+:::demo 可选，是否禁用开关，默认为false
+```vue
+<template>
+ <d-switch v-model:checked="checkedDisabled" :disabled='true'></d-switch>
+ <d-switch v-model:checked="checkedDisabled1" :disabled='true'></d-switch>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
 
-<br />
-<br />
+export default defineComponent({
+  setup() {
+    const checkedDisabled = ref(true)
+    const checkedDisabled1 = ref(false)
+    return {
+      checkedDisabled,
+      checkedDisabled1
+    }
+  }
+})
+</script>
+```
+:::
 
 ### 自定义样式
 
-<br />
-<d-switch v-model:checked="checkedColor" color="#FECC55"></d-switch>
-
-<br />
-<d-switch v-model:checked="checkedContent">
+:::demo 可选，可设置文字说明/图标
+```vue
+<template>
+ <d-switch v-model:checked="checkedColor" color="#FECC55"></d-switch>
+ <d-switch v-model:checked="checkedContent">
   <template #checkedContent>开</template>
   <template #uncheckedContent>关</template>
 </d-switch>
-
-<br />
-<d-switch color="#50D4AB" v-model:checked="checkedIcon">
+ <d-switch color="#50D4AB" v-model:checked="checkedIcon">
   <template #checkedContent>
     <i class="icon-right"></i>
   </template>
@@ -70,50 +77,16 @@
     <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>
-```
+</template>
 <script>
 import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   setup() {
-    const checkedSmall = ref(true)
-    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
@@ -121,20 +94,22 @@ export default defineComponent({
   }
 })
 </script>
+```
+:::
 
 ### d-switch 参数
 
-|       参数       |            类型                   | 默认  |               说明                    | 跳转 Demo             
-| :--------------: | :--------------------------: | :---: | :-----------------------: | :--------------------- |
-|       size       |             `small \| middle \| large`              |  `middle`   |             可选，开关尺寸大小          | [基本用法](#基本用法) 
-|      color       |                   `string`                    |  --   |             可选，开关打开时的自定义颜色      | [自定义样式](#自定义样式)
-|     checked      |                   `boolean`                   | false |              可选，开关是否打开，默认关闭      | [基本用法](#基本用法) 
-|     disabled     |                   `boolean`                   | false |                    可选，是否禁用开关          | [基本用法](#基本用法) 
-|  checkedContent  |            `string \| HTMLElement`            |  ''  |             可选，开关打开时说明               | [自定义样式](#自定义样式)
-| uncheckedContent |             `string \| HTMLElement`             |  ''   |             可选，开关关闭时说明                | [自定义样式](#自定义样式)
+|       参数       |            类型            |   默认   |             说明             | 跳转 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 |
+| change | `EventEmitter<boolean>` | 可选,开关打开返回 true,关闭返回 false |
\ No newline at end of file
-- 
Gitee