docs: 添加:::demo:::imagepreview/switch/searchbar (#962)

* upd: imagepreview/switch/searchbar 增加 :::demo

src/packages/__VUE/imagepreview/doc.md

@@ -17,230 +17,242 @@ app.use(ImagePreview);
 ```
 
 ### 基础用法
-
+:::demo
 ```html
-<nut-imagepreview
-    :show="showPreview"
-    :images="imgData"
-    @close="hideFn"
-/>
-<nut-cell isLink title="展示图片预览" :showIcon="true" @click="showFn"></nut-cell>
-```
-
-```javascript
-setup() {
-    const resData = reactive({
-        showPreview: false,
-        imgData: [
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
-            },
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
-            },
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
-            },
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
-            },
-        ]
-    });
+<template>
+    <nut-imagepreview :show="showPreview" :images="imgData" @close="hideFn"/>
+    <nut-cell isLink title="展示图片预览" :showIcon="true" @click="showFn"></nut-cell>
+</template>
+
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+        const resData = reactive({
+            showPreview: false,
+            imgData: [
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
+                },
+            ]
+        });
 
-    const showFn = () => {
-        resData.showPreview = true;
-    }
+        const showFn = () => {
+            resData.showPreview = true;
+        }
 
-    const hideFn = () => {
-        resData.showPreview = false;
+        const hideFn = () => {
+            resData.showPreview = false;
+        }
+        
+        return {
+            ...toRefs(resData),
+            showFn,
+            hideFn
+        };
     }
-    
-    return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-    };
-},
+  };
+</script>
 ```
+:::
 
 ### 设置初始页码
-
+:::demo
 ```html
-<nut-imagepreview
-    :show="showPreview"
-    :images="imgData"
-    :content-close="true"
-    :init-no="3"
-    @close="hideFn"
-/>
-<nut-cell isLink title="设置初始页码的图片预览" :showIcon="true" @click="showFn"></nut-cell>
-```
-
-```javascript
-setup() {
-    const resData = reactive({
-        showPreview: false,
-        imgData: [
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
-            },
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
-            },
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
-            },
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
-            },
-        ]
-    });
+<template>
+    <nut-imagepreview :show="showPreview" :images="imgData" :content-close="true" :init-no="3" @close="hideFn"/>
+    <nut-cell isLink title="设置初始页码的图片预览" :showIcon="true" @click="showFn"></nut-cell>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+        const resData = reactive({
+            showPreview: false,
+            imgData: [
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
+                },
+            ]
+        });
 
-    const showFn = () => {
-        resData.showPreview = true;
-    }
+        const showFn = () => {
+            resData.showPreview = true;
+        }
 
-    const hideFn = () => {
-        resData.showPreview = false;
+        const hideFn = () => {
+            resData.showPreview = false;
+        }
+        
+        return {
+            ...toRefs(resData),
+            showFn,
+            hideFn
+        };
     }
-    
-    return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-    };
-},
+  };
+</script>
 ```
+:::
 
 ### 设置轮播指示器及颜色
-
+:::demo
 ```html
-<nut-imagepreview
-    :show="showPreview"
-    :images="imgData"
-    :pagination-visible="true"
-    pagination-color="red"
-    @close="hideFn"
-/>
-<nut-cell isLink title="设置轮播指示器及颜色" :showIcon="true" @click="showFn"></nut-cell>
-```
-
-```javascript
-setup() {
-    const resData = reactive({
-        showPreview: false,
-        imgData: [
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
-            },
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
-            },
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
-            },
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
-            },
-        ]
-    });
+<template>
+    <nut-imagepreview
+        :show="showPreview"
+        :images="imgData"
+        :pagination-visible="true"
+        pagination-color="red"
+        @close="hideFn"
+    />
+    <nut-cell isLink title="设置轮播指示器及颜色" :showIcon="true" @click="showFn"></nut-cell>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+        const resData = reactive({
+            showPreview: false,
+            imgData: [
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
+                },
+            ]
+        });
 
-    const showFn = () => {
-        resData.showPreview = true;
-    }
+        const showFn = () => {
+            resData.showPreview = true;
+        }
 
-    const hideFn = () => {
-        resData.showPreview = false;
+        const hideFn = () => {
+            resData.showPreview = false;
+        }
+        
+        return {
+            ...toRefs(resData),
+            showFn,
+            hideFn
+        };
     }
-    
-    return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-    };
-},
+  };
+</script>
 ```
+:::
 
 ### 视频、图片预览
-
+:::demo
 ```html
-<nut-imagepreview
-    :show="showPreview"
-    :images="imgData"
-    :videos="videoData"      
-    @close="hideFn"
-/>
-<nut-cell isLink title="视频、图片预览" :showIcon="true" @click="showFn"></nut-cell>
-```
-
-```javascript
-setup() {
-    const resData = reactive({
-        showPreview: false,
-        imgData: [
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
-            },
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
-            },
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
-            },
-            {
-                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
-            },
-        ],
-        videoData: [
-            {
-                source: {
-                    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-                    type: 'video/mp4'
+<template>
+    <nut-imagepreview
+        :show="showPreview"
+        :images="imgData"
+        :videos="videoData"      
+        @close="hideFn"
+    />
+    <nut-cell isLink title="视频、图片预览" :showIcon="true" @click="showFn"></nut-cell>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+        const resData = reactive({
+            showPreview: false,
+            imgData: [
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
                 },
-                options: {
-                    muted: true,
-                    controls: true
-                }
-            },
-            {
-                source: {
-                    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-                    type: 'video/mp4'
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
                 },
-                options: {
-                    muted: true,
-                    controls: true
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
+                },
+            ],
+            videoData: [
+                {
+                    source: {
+                        src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+                        type: 'video/mp4'
+                    },
+                    options: {
+                        muted: true,
+                        controls: true
+                    }
+                },
+                {
+                    source: {
+                        src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+                        type: 'video/mp4'
+                    },
+                    options: {
+                        muted: true,
+                        controls: true
+                    }
                 }
-            }
-        ],
-    });
+            ],
+        });
 
-    const showFn = () => {
-        resData.showPreview = true;
-    }
+        const showFn = () => {
+            resData.showPreview = true;
+        }
 
-    const hideFn = () => {
-        resData.showPreview = false;
+        const hideFn = () => {
+            resData.showPreview = false;
+        }
+        
+        return {
+            ...toRefs(resData),
+            showFn,
+            hideFn
+        };
     }
-    
-    return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-    };
-},
+  };
+</script>
 ```
+:::
                 
 ### 函数式调用
-
+:::demo
 ```html
-<nut-cell isLink title="函数式调用的图片预览" :showIcon="true" @click="fnShow"></nut-cell>
-```
-
-```javascript
-import { ImagePreview } from '@nutui/nutui';
-
-export default {
+<template>
+    <nut-cell isLink title="函数式调用的图片预览" :showIcon="true" @click="fnShow"></nut-cell>
+</template>
+
+<script lang="ts">
+  import { ImagePreview } from '@nutui/nutui';
+  import { reactive, toRefs } from 'vue';
+  export default {
     setup() {
         const resData = reactive({
             imgData: [
@@ -275,9 +287,11 @@ export default {
             ...toRefs(resData),
             fnShow
         };
-    },
-}
+    }
+  };
+</script>
 ```
+:::
     
 ### Props
 

src/packages/__VUE/searchbar/doc.md

@@ -19,165 +19,172 @@ app.use(SearchBar).use(Icon);
 ```    
     
 ### 基础用法
-
+:::demo
 ```html
+<template>
   <nut-searchbar v-model="searchValue"></nut-searchbar>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        searchValue: ""
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    }
+  };
+</script>
 ```
-
-```javascript
-import { toRefs, reactive } from 'vue';
-
-export default {
-  setup() {
-    const state = reactive({
-      searchValue: ""
-    });
-
-    return {
-      ...toRefs(state),
-    };
-  }
-}
-```
+:::
 
 ### 搜索事件监听
-
+:::demo
 ```html
-<nut-searchbar v-model="searchValue" @search="search"></nut-searchbar>
-```
-
-```javascript
-import { toRefs, reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
-
-export default {
-  setup() {
-    const state = reactive({
-      searchValue: ""
-    });
-
-    const search = function () {
-      Toast.text('搜索触发');
-    };
-
-    return {
-      ...toRefs(state),
-      search,
-    };
-  }
-}
+<template>
+  <nut-searchbar v-model="searchValue" @search="search"></nut-searchbar>
+</template>
+<script lang="ts">
+  import { toRefs, reactive } from 'vue';
+  import { Toast } from '@nutui/nutui';
+  export default {
+    setup() {
+      const state = reactive({
+        searchValue: ""
+      });
+
+      const search = function () {
+        Toast.text('搜索触发');
+      };
+
+      return {
+        ...toRefs(state),
+        search,
+      };
+    }
+  };
+</script>
 ```
+:::
 
 ### 显示搜索 icon
-
+:::demo
 ```html
-<nut-searchbar v-model="searchValue">
-  <template v-slot:leftin>
-    <nut-icon size="14" name="search2"></nut-icon>
-  </template>
-</nut-searchbar>
-```
-
-```javascript
-import { toRefs, reactive } from 'vue';
-import { Icon } from '@nutui/nutui';
-
-export default {
-  setup() {
-    const state = reactive({
-      searchValue: ""
-    });
-
-    return {
-      ...toRefs(state),
-    };
-  }
-}
+<template>
+  <nut-searchbar v-model="searchValue">
+    <template v-slot:leftin>
+      <nut-icon size="14" name="search2"></nut-icon>
+    </template>
+  </nut-searchbar>
+</template>
+<script lang="ts">
+  import { toRefs, reactive } from 'vue';
+  import { Icon } from '@nutui/nutui';
+  export default {
+    setup() {
+      const state = reactive({
+        searchValue: ""
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    }
+  };
+</script>
 ```
+:::
 
 ### 右侧添加搜索文字
-
+:::demo
 ```html
-<nut-searchbar v-model="searchValue">
-  <template v-slot:rightout>
-    搜索
-  </template>
-</nut-searchbar>
+<template>
+  <nut-searchbar v-model="searchValue">
+    <template v-slot:rightout>
+      搜索
+    </template>
+  </nut-searchbar>
+</template>
+<script lang="ts">
+  import { toRefs, reactive } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        searchValue: ""
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    }
+  };
+</script>
 ```
+:::
 
-```javascript
-import { toRefs, reactive } from 'vue';
-
-export default {
-  setup() {
-    const state = reactive({
-      searchValue: ""
-    });
-
-    return {
-      ...toRefs(state),
-    };
-  }
-}
-```
     <h2>更改输入框内部及外部的背景样式</h2>
 
 ### 更改输入框内部及外部的背景样式
-
+:::demo
 ```html
-<nut-searchbar v-model="searchValue4" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff"> </nut-searchbar>
-```
-
-```javascript
-import { toRefs, reactive } from 'vue';
-
-export default {
-  setup() {
-    const state = reactive({
-      searchValue: ""
-    });
-
-    return {
-      ...toRefs(state),
-    };
-  }
-}
+<template>
+  <nut-searchbar v-model="searchValue4" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff"> </nut-searchbar>
+</template>
+<script lang="ts">
+  import { toRefs, reactive } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        searchValue: ""
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    }
+  };
+</script>
 ```
+:::
 ### 显示全部 icon
-
+:::demo
 ```html
-<nut-searchbar v-model="searchValue">
-  <template v-slot:leftout>
-    <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
-  </template>
-  <template v-slot:leftin>
-    <nut-icon size="14" name="search2"></nut-icon>
-  </template>
-  <template v-slot:rightin>
-    <nut-icon size="20" name="photograph"></nut-icon>
-  </template>
-  <template v-slot:rightout>
-    <nut-icon size="20" name="message"></nut-icon>
-  </template>
-</nut-searchbar> 
-```
-
-``` javascript
-import { toRefs, reactive } from 'vue';
-import { Icon } from '@nutui/nutui';
-
-export default {
-  setup() {
-    const state = reactive({
-      searchValue: ""
-    });
-
-    return {
-      ...toRefs(state),
-    };
-  }
-}
+<template>
+  <nut-searchbar v-model="searchValue">
+    <template v-slot:leftout>
+      <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
+    </template>
+    <template v-slot:leftin>
+      <nut-icon size="14" name="search2"></nut-icon>
+    </template>
+    <template v-slot:rightin>
+      <nut-icon size="20" name="photograph"></nut-icon>
+    </template>
+    <template v-slot:rightout>
+      <nut-icon size="20" name="message"></nut-icon>
+    </template>
+  </nut-searchbar> 
+</template>
+<script lang="ts">
+  import { toRefs, reactive } from 'vue';
+  import { Icon } from '@nutui/nutui';
+  export default {
+    setup() {
+      const state = reactive({
+        searchValue: ""
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    }
+  };
+</script>
 ```
+:::
     
 ### Props
     

src/packages/__VUE/switch/doc.md

@@ -21,89 +21,145 @@ app.use(Switch);
 ## 代码演示
 
 ### 基础用法
-
+:::demo
 ``` html
-<nut-switch v-model="checked" />
-```
-``` javascript
-import { ref } from 'vue';
-export default {
-  setup() {
-    const checked = ref(true);
-    return { checked };
-  },
-};
+<template>
+  <nut-switch v-model="checked" />
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    setup() {
+      const checked = ref(true);
+      return { checked };
+    }
+  };
+</script>
 ```
+:::
 
 ### 禁用状态
-
+:::demo
 ``` html
-<nut-switch v-model="checked" disable />
+<template>
+  <nut-switch v-model="checked" disable />
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    setup() {
+      const checked = ref(true);
+      return { checked };
+    }
+  };
+</script>
 ```
+:::
 
 ### 加载状态
-
+:::demo
 ``` html
-<nut-switch v-model="checked" loading color="loading" />
+<template>
+  <nut-switch v-model="checked" loading color="red" />
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    setup() {
+      const checked = ref(true);
+      return { checked };
+    }
+  };
+</script>
 ```
+:::
 
 ### change事件
-
+:::demo
 ``` html
-<nut-switch v-model="checked" @change="change" />
-```
-``` javascript
-import { ref, getCurrentInstance } from 'vue';
-export default {
-  setup() {
-    let { proxy } = getCurrentInstance() as any;
-    const checked = ref(true);
-    const change = (value: boolean, event: Event) => {
-      proxy.$toast.text(`触发了change事件，开关状态：${value}`);
-    };
-    return {
-      checked,
-      change
-    };
-  }
-};
+<template>
+  <nut-switch v-model="checked" @change="change" />
+</template>
+<script lang="ts">
+  import { ref, getCurrentInstance } from 'vue';
+  export default {
+    setup() {
+      let { proxy } = getCurrentInstance() as any;
+      const checked = ref(true);
+      const change = (value: boolean, event: Event) => {
+        proxy.$toast.text(`触发了change事件，开关状态：${value}`);
+      };
+      return {
+        checked,
+        change
+      };
+    }
+  };
+</script>
 ```
-
+:::
 ### 异步控制
-
+:::demo
 ``` html
-<nut-switch :model-value="checkedAsync" @change="changeAsync" />
-```
-``` javascript
-import { ref, getCurrentInstance } from 'vue';
-export default {
-  setup() {
-    let { proxy } = getCurrentInstance() as any;
-    const checkedAsync = ref(true);
-    const changeAsync = (value: boolean, event: Event) => {
-      proxy.$toast.text(`2秒后异步触发 ${value}`);
-      setTimeout(() => {
-        checkedAsync.value = value;
-      }, 2000);
-    };
-    
-    return {
-      checkedAsync,
-      changeAsync
-    };
-  }
-};
+<template>
+  <nut-switch :model-value="checkedAsync" @change="changeAsync" />
+</template>
+<script lang="ts">
+  import { ref, getCurrentInstance } from 'vue';
+  export default {
+    setup() {
+      let { proxy } = getCurrentInstance() as any;
+      const checkedAsync = ref(true);
+      const changeAsync = (value: boolean, event: Event) => {
+        proxy.$toast.text(`2秒后异步触发 ${value}`);
+        setTimeout(() => {
+          checkedAsync.value = value;
+        }, 2000);
+      };
+      
+      return {
+        checkedAsync,
+        changeAsync
+      };
+    }
+  };
+</script>
 ```
+:::
 ### 自定义颜色
-
+:::demo
 ``` html
-<nut-switch v-model="checked" @change="switchChange" active-color="blue" />
+<template>
+  <nut-switch v-model="checked" active-color="blue" />
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    setup() {
+      const checked = ref(true);
+      return { checked };
+    }
+  };
+</script>
 ```
+:::
 ### 支持文字
-
+:::demo
 ``` html
-<nut-switch v-model="checked" @change="switchChange" active-text="开" inactive-text="关" />
+<template>
+  <nut-switch v-model="checked" active-text="开" inactive-text="关" />
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    setup() {
+      const checked = ref(true);
+      return { checked };
+    }
+  };
+</script>
 ```
+:::
 
 ## API