文档优化

docs/examples-docs/checkbox.md

@@ -1,9 +1,49 @@
+<style>
+@component-namespace demo {
+  @b checkbox {
+    .zan-checkbox-wrapper {
+      padding: 0 20px;
+
+      .zan-checkbox {
+        margin: 10px 0;
+      }
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      checkbox1: true,
+      checkbox2: true,
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: ['a', 'b']
+    };
+  },
+
+  watch: {
+    result(val) {
+      console.log(val);
+    }
+  }
+};
+</script>
+
 ## Checkbox组件
 
 ### 基础用法
 
+:::demo
 ```html
-<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
+<div class="zan-checkbox-wrapper">
+  <zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
+</div>
 
 <script>
 export default {
@@ -15,11 +55,15 @@ export default {
 }; 
 </script>
 ```
+:::
 
 ### 禁用状态
 
+:::demo
 ```html
-<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
+<div class="zan-checkbox-wrapper">
+  <zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
+</div>
 
 <script>
 export default {
@@ -31,13 +75,17 @@ export default {
 }; 
 </script>
 ```
+:::
 
 ### Checkbox组
 
+:::demo
 ```html
-<zan-checkbox-group v-model="result">
-  <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
-</zan-checkbox-group>
+<div class="zan-checkbox-wrapper">
+  <zan-checkbox-group v-model="result">
+    <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+  </zan-checkbox-group>
+</div>
 
 <script>
 export default {
@@ -60,13 +108,17 @@ export default {
 };
 </script>
 ```
+:::
 
 ### 禁用Checkbox组
 
+:::demo
 ```html
-<zan-checkbox-group v-model="result" disabled>
-  <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
-</zan-checkbox-group>
+<div class="zan-checkbox-wrapper">
+  <zan-checkbox-group v-model="result" disabled>
+    <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+  </zan-checkbox-group>
+</div>
 
 <script>
 export default {
@@ -83,9 +135,11 @@ export default {
 };
 </script>
 ```
+:::
 
 ### 与Cell组件一起使用
 
+:::demo
 ```html
 <zan-checkbox-group v-model="result">
   <zan-cell-group>
@@ -110,6 +164,7 @@ export default {
 };
 </script>
 ```
+:::
 
 ### Checkbox API