From ad7c3d19422210b7c7e4ca7a5ecdae90cd56ca4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Fri, 22 Oct 2021 13:05:05 +0800
Subject: [PATCH 1/2] =?UTF-8?q?docs:=20=E6=94=B9=E6=88=90=E8=83=BD?=
 =?UTF-8?q?=E5=B1=95=E5=BC=80/=E6=94=B6=E8=B5=B7=E7=9A=84=E5=BD=A2?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/checkbox/index.md | 46 +++++++++++++++++++++++--------
 1 file changed, 35 insertions(+), 11 deletions(-)

diff --git a/docs/components/checkbox/index.md b/docs/components/checkbox/index.md
index a0acd62a..250be691 100644
--- a/docs/components/checkbox/index.md
+++ b/docs/components/checkbox/index.md
@@ -8,22 +8,44 @@
 2. 单独使用可以表示在两个状态之间切换，可以和提交操作结合。
 
 ### 基本用法
+:::demo
 
-<d-checkbox label="Checked" :isShowTitle="false" v-model="checked" />
-<d-checkbox label="Not checked" :isShowTitle="false" v-model="unchecked" />
+```vue
+<template>
+  <d-checkbox label="Checked" :isShowTitle="false" v-model="checked" />
+  <d-checkbox label="Not checked" :isShowTitle="false" v-model="unchecked" />
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
 
-```html
-<d-checkbox label="Checked" :isShowTitle="false" v-model="checked" />
-<d-checkbox label="Not checked" :isShowTitle="false" v-model="unchecked" />
+export default defineComponent({
+  setup() {
+    const checked = ref(true)
+    const unchecked = ref(false)
+    return {
+      checked,
+      unchecked
+    }
+  }
+})
+</script>
 ```
+:::
+
 
 #### 使用 CheckboxGroup
-<d-checkbox-group v-model="checkedValues" label="爱好">
-  <d-checkbox label="篮球" value="basketball" />
-  <d-checkbox label="足球" value="football" />
-</d-checkbox-group>
-<div>{{ checkedValues.reduce((prev, current) => `${current} ${prev}`, '') }}</div>
+:::demo
 
+```vue
+<template>
+  <d-checkbox-group v-model="checkedValues" label="爱好">
+    <d-checkbox label="篮球" value="basketball" />
+    <d-checkbox label="足球" value="football" />
+  </d-checkbox-group>
+<div>
+  {{ checkedValues.reduce((prev, current) => `${current} ${prev}`, '') }}
+</div>
+</template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 
@@ -39,4 +61,6 @@ export default defineComponent({
     }
   }
 })
-</script>
\ No newline at end of file
+</script>
+```
+:::
\ No newline at end of file
-- 
Gitee


From cc88742819caf5d449c413c1c3aeb95e2fe1e98e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Fri, 22 Oct 2021 13:21:30 +0800
Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=E4=BC=98=E5=8C=96=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E4=B8=AD=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/checkbox/index.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/docs/components/checkbox/index.md b/docs/components/checkbox/index.md
index 250be691..035224a4 100644
--- a/docs/components/checkbox/index.md
+++ b/docs/components/checkbox/index.md
@@ -15,6 +15,7 @@
   <d-checkbox label="Checked" :isShowTitle="false" v-model="checked" />
   <d-checkbox label="Not checked" :isShowTitle="false" v-model="unchecked" />
 </template>
+
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 
@@ -42,10 +43,11 @@ export default defineComponent({
     <d-checkbox label="篮球" value="basketball" />
     <d-checkbox label="足球" value="football" />
   </d-checkbox-group>
-<div>
-  {{ checkedValues.reduce((prev, current) => `${current} ${prev}`, '') }}
-</div>
+  <div>
+    {{ checkedValues.reduce((prev, current) => `${current} ${prev}`, '') }}
+  </div>
 </template>
+
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 
-- 
Gitee