docs(Barrage、Signature、CountUp、TextArea、Collapse): 文档调试功能 (#963)

* docs: 文档增加调试功能(Barrage、Signature、CountUp、TextArea、Collapse)

src/packages/__VUE/barrage/doc.md

@@ -23,15 +23,23 @@ app.use(Barrage);
 ### 基础用法1
 
 `Icon` 的 `name` 属性支持传入图标名称或图片链接。
+:::demo
 
 ```html
-<nut-barrage ref="danmu" :danmu="list"></nut-barrage>
-```
-``` javascript
+<template>
+  <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
+  <div class="test">
+    <button @click="addDanmu" class="add nut-button--primary">随机添加</button>
+  </div>
+</template>
+<script>
+import { ref } from 'vue';
+export default {
+  props: {},
   setup() {
-    const inputVal = ref<any>('');
-    const danmu = ref<any>(null);
-    let list = ref(["画美不看", "不明觉厉", "喜大普奔", "男默女泪", "累觉不爱", "爷青结"]); 
+    const inputVal = ref('');
+    const danmu = ref(null);
+    let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']);
     function addDanmu() {
       let n = Math.random();
       danmu.value.add('随机——' + String(n).substr(2, 10));
@@ -43,8 +51,11 @@ app.use(Barrage);
       addDanmu
     };
   }
+};
+</script>
 ```
 
+:::
 
 
 ## API

src/packages/__VUE/collapse/doc.md

@@ -23,9 +23,11 @@ app.use(CollapseItem);
 ## 基本用法
 
 通过`v-model`控制展开的面板列表，`activeNames`为数组格式
+:::demo
 
 ```html
-<nut-collapse v-model:active="active1" icon="down-arrow">
+<template>
+<nut-collapse v-model:active="activeNames" icon="down-arrow">
   <nut-collapse-item :name="1">
     <template v-slot:mTitle>
       {{title1}}
@@ -38,157 +40,187 @@ app.use(CollapseItem);
   <nut-collapse-item :title="title3" :name="3" disabled>
   </nut-collapse-item>
 </nut-collapse>
-```
-
-``` javascript
-setup() {
-  const activeNames = reactive([1, 2]);
-  const title = reactive({
-    title1: '标题1',
-    title2: '标题2',
-    title3: '标题3',
-  })
-  return {
-    activeNames,
-    ...toRefs(title)
-  };
+</template>
+<script>
+import { reactive, toRefs } from 'vue';
+export default {
+  setup() {
+    const activeNames = reactive([1, 2]);
+    const title = reactive({
+      title1: '标题1',
+      title2: '标题2',
+      title3: '标题3',
+    })
+    return {
+      activeNames,
+      ...toRefs(title)
+    };
+  }
 }
+
 ```
+:::
 ### 无icon样式
+:::demo
 
 ```html
-<nut-collapse v-model:active="activeName" :accordion="true">
-  <nut-collapse-item :title="title1" :name="1">
-   引入Vue3新特性 Composition API、Teleport、Emits 等
-  </nut-collapse-item>
-  <nut-collapse-item :title="title2" :name="2">
-    全面使用 TypeScipt
-  </nut-collapse-item>
-</nut-collapse>
-```
-
-``` javascript
-setup() {
-  const activeName = ref(1);
-  const title = reactive({
-    title1: '标题1',
-    title2: '标题2',
-    title3: '标题3',
-  })
-  return {
-    activeName,
-    ...toRefs(title)
-  };
+<template>
+  <nut-collapse v-model:active="activeName" :accordion="true">
+    <nut-collapse-item :title="title1" :name="1">
+    引入Vue3新特性 Composition API、Teleport、Emits 等
+    </nut-collapse-item>
+    <nut-collapse-item :title="title2" :name="2">
+      全面使用 TypeScipt
+    </nut-collapse-item>
+  </nut-collapse>
+</template>
+<script>
+import { reactive, ref, toRefs } from 'vue';
+export default {
+  setup() {
+    const activeName = ref(1);
+    const title = reactive({
+      title1: '标题1',
+      title2: '标题2',
+      title3: '标题3',
+    })
+    return {
+      activeName,
+      ...toRefs(title)
+    };
+  }
 }
+</script>
 ```
-
+:::
 ### 手风琴
 
 通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式；`subTitle`可以设置副标题的内容
 
-```html
- <nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">
-  <nut-collapse-item :title="title1" :name="1">
-    基于京东设计语言体系，构建场景
-  </nut-collapse-item>
-  <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
-   提高界⾯的模块化通用程度
-  </nut-collapse-item>
-  <nut-collapse-item :title="title3" :name="3">
-  采用组合式 API Composition 语法重构，结构清晰，功能模块化
-  </nut-collapse-item>
-</nut-collapse>
-```
+:::demo
 
-``` javascript
-setup() {
-  const activeName = ref(1);
-  const subTitle = '副标题';
-  const title = reactive({
-    title1: '标题1',
-    title2: '标题2',
-    title3: '标题3',
-  })
-  return {
-    activeName,
-    subTitle,
-    ...toRefs(title)
-  };
+```html
+<template>
+  <nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">
+    <nut-collapse-item :title="title1" :name="1">
+      基于京东设计语言体系，构建场景
+    </nut-collapse-item>
+    <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
+      提高界⾯的模块化通用程度
+    </nut-collapse-item>
+    <nut-collapse-item :title="title3" :name="3">
+      采用组合式 API Composition 语法重构，结构清晰，功能模块化
+    </nut-collapse-item>
+  </nut-collapse>
+</template>
+<script>
+import { reactive, ref, toRefs } from 'vue';
+export default {
+  setup() {
+    const activeName = ref(1);
+    const subTitle = '副标题';
+    const title = reactive({
+      title1: '标题1',
+      title2: '标题2',
+      title3: '标题3',
+    })
+    return {
+      activeName,
+      subTitle,
+      ...toRefs(title)
+    };
+  }
 }
+</script>
 ```
 
-
+:::
 ### 自定义折叠图标
 
 通过icon设置自定义图标，rotate设置图标旋转的角度
 
-```html
-<nut-collapse
-  v-model:active="activeName"
-  :accordion="true"
-  icon="arrow-right2"
-  rotate="90"
->
-  <nut-collapse-item :title="title1" :name="1">
-    <template v-slot:sTitle>
-      文本测试
-    </template>
-    NUTUI3.0重新思考其内在的一致性和可组合性
-  </nut-collapse-item>
-  <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
-    提⾼产研输出对接的效率，降低输出工作量
-  </nut-collapse-item>
-</nut-collapse>
-```
+:::demo
 
-``` javascript
-const activeName = ref(1);
-const title = reactive({
-  title1: '标题1',
-  title2: '标题2',
-})
-return {
-  activeName,
-  ...toRefs(title)
-};
+```html
+<template>
+  <nut-collapse
+    v-model:active="activeName"
+    :accordion="true"
+    icon="arrow-right2"
+    rotate="90"
+  >
+    <nut-collapse-item :title="title1" :name="1">
+      <template v-slot:sTitle>
+        文本测试
+      </template>
+      NUTUI3.0重新思考其内在的一致性和可组合性
+    </nut-collapse-item>
+    <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
+      提⾼产研输出对接的效率，降低输出工作量
+    </nut-collapse-item>
+  </nut-collapse>
+</template>
+<script>
+import { reactive, ref, toRefs } from 'vue';
+export default {
+  setup() {
+    const activeName = ref(1);
+    const title = reactive({
+      title1: '标题1',
+      title2: '标题2',
+    })
+    return {
+      activeName,
+      ...toRefs(title)
+    };
+  }
+}
+</script>
 ```
-
+:::
 
 ### 自定义标题图标
 
 通过icon设置自定义图标，rotate设置图标旋转的角度
+:::demo
 
 ```html
-<nut-collapse
-  v-model:active="activeName"
-  title-icon="issue"
-  title-icon-color="red"
-  title-icon-size="20px"
-  title-icon-position="left"
-  icon="down-arrow"
-  :accordion="true"
->
-  <nut-collapse-item :title="title1" :name="1">
-  组件 emits 事件单独提取，增强代码可读性
-  </nut-collapse-item>
-  <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
-  使用 Teleport 新特性重构挂载类组件
-  </nut-collapse-item>
-</nut-collapse>
-```
-
-``` javascript
-const activeName = ref(1);
-const title = reactive({
-  title1: '标题1',
-  title2: '标题2',
-})
-return {
-  activeName,
-  ...toRefs(title)
-};
+<template>
+  <nut-collapse
+    v-model:active="activeName"
+    title-icon="issue"
+    title-icon-color="red"
+    title-icon-size="20px"
+    title-icon-position="left"
+    icon="down-arrow"
+    :accordion="true"
+  >
+    <nut-collapse-item :title="title1" :name="1">
+    组件 emits 事件单独提取，增强代码可读性
+    </nut-collapse-item>
+    <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
+    使用 Teleport 新特性重构挂载类组件
+    </nut-collapse-item>
+  </nut-collapse>
+</template>
+<script>
+import { reactive, ref, toRefs } from 'vue';
+export default {
+  setup() {
+    const activeName = ref(1);
+    const title = reactive({
+      title1: '标题1',
+      title2: '标题2',
+    })
+    return {
+      activeName,
+      ...toRefs(title)
+    };
+  }
+}
+</script>
 ```
-
+:::
 ## Collapse Prop
 
 | 字段 | 说明 | 类型 | 默认值

src/packages/__VUE/countup/doc.md

@@ -21,99 +21,125 @@ app.use(CountUp);
 ## 代码演示
 
 ## 基本用法
+:::demo
 
 ```html
-<nut-countup :init-num='0' :end-num='200'></nut-countup>
-
-<nut-countup :init-num='150.00' :end-num='0.00' :speed='2.62' :to-fixed='2'></nut-countup>
-
-<nut-countup :init-num='1000.00' :end-num='0.00' :speed='6.3' :start-flag='startNum' :to-fixed='2'></nut-countup>
+<template>
+    <nut-countup :init-num='0' :end-num='200'></nut-countup>
+    <nut-countup :init-num='150.00' :end-num='0.00' :speed='2.62' :to-fixed='2'></nut-countup>
+    <nut-countup :init-num='1000.00' :end-num='0.00' :speed='6.3' :start-flag='startNum' :to-fixed='2'></nut-countup>
+</template>
 ```
 
+:::
 ## 数字滚动
+:::demo
 
 ```html
-<nut-countup :scrolling="true" :init-num='17.618' :during="600"></nut-countup>
+<template>
+    <nut-countup :scrolling="true" :init-num='17.618' :during="600"></nut-countup>
+</template>
 ```
 
+:::
+
 ## 自定义数字图片展示
+:::demo
 
 ```html
-<nut-countup
-    :custom-change-num="customNumber"
-    :custom-bg-img="bgImage"
-    :custom-spac-num="11"
-    :num-width="33"
-    :num-height="47"
-    :during="5000"
->
-</nut-countup>
-```
-```javascript
+<template>
+    <nut-countup
+        :custom-change-num="customNumber"
+        :custom-bg-img="bgImage"
+        :custom-spac-num="11"
+        :num-width="33"
+        :num-height="47"
+        :during="5000"
+    >
+    </nut-countup>
+</template>
+<script>
+import { ref, onMounted } from 'vue';
+
 export default {
-    data() {
-        return {
-            customNumber: 618, 
-            bgImage: 'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png'
-        };
-    },
-    methods: {
-        run() {
+    setup() {
+        const customNumber = ref(618);
+        const bgImage = ref('https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png');
+        const run = () => {
             let timer = null;
             timer = setInterval(() => {
-                this.customNumber = Math.floor(Math.random() * (700 - 100 + 1) + 100);
-            }, 5000);
+                customNumber.value = Math.floor(Math.random() * (700 - 100 + 1) + 100);
+            }, 5000)
+        };
+        onMounted(() => {
+            run();
+        });
+        return {
+            customNumber,
+            bgImage
         }
-    },
-    mounted() {
-        this.run();
     }
 };
+</script>
 ```
+:::
 
 ## 抽奖
+:::demo
 
 ```html
-<nut-countup
-    ref="countup-machine"
-    type="machine"
-    :machine-num="machineNum"
-    :machine-prize-num="5"
-    :machine-prize-level="prizeLevel"
-    :custom-bg-img="bgImage"
-    :num-width="100"
-    :num-height="100"
-    :during="3000"
-    @scroll-end="scrollAniEnd"
->
-</nut-countup>
-<nut-button @click="startRole" :disabled="startFlag">抽奖</nut-button>
-```
-```javascript
+<template>
+    <nut-countup
+        ref="countupMachineDom"
+        type="machine"
+        :machine-num="machineNum"
+        :machine-prize-num="5"
+        :machine-prize-level="prizeLevel"
+        :custom-bg-img="bgImage"
+        :num-width="100"
+        :num-height="100"
+        :during="3000"
+        @scroll-end="scrollAniEnd"
+    >
+    </nut-countup>
+    <nut-button @click="startRole" :disabled="startFlag">抽奖</nut-button>
+</template>
+<script>
+import { ref, onMounted } from 'vue';
 export default {
-    data() {
-        return {
-            startFlag: false,
-            machineNum: 3,
-            bgImage: 'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png',
-            prizeLevel: 0
+    setup() {
+        const countupMachineDom = ref(null);
+        const startFlag = ref(false);
+        const machineNum = ref(3);
+        const bgImage = ref('https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png');
+        const prizeLevel = ref(0);
+        const startRole = () => {
+            prizeLevel.value = Math.floor(Math.random() * 5 + 1);
+            startFlag.value = true;
+            countupMachineDom.value.machineLuck();
         };
-    },
-    methods: {
-        startRole() {
-            this.prizeLevel = Math.floor(Math.random() * 5 + 1);
-            this.startFlag = true;
-            this.$refs['countup-machine'].machineLuck();
-        },
-        scrollAniEnd() {
-            this.$toast.text('恭喜中奖！！！');
+
+        const scrollAniEnd = () => {
+            console.log('恭喜中奖！！！');
             setTimeout(() => {
-                this.startFlag = false;
+                startFlag.value = false;
             }, 300);
         }
+
+        return {
+            countupMachineDom,
+            startFlag,
+            machineNum,
+            bgImage,
+            prizeLevel,
+            startRole,
+            scrollAniEnd
+        }
     }
 };
+</script>
 ```
+:::
 
 
 ## Prop

src/packages/__VUE/signature/doc.md

@@ -20,47 +20,99 @@ app.use(Signature);
 ## 代码演示
     
 ### 基础用法1
-    
+
+:::demo
+
 ```html
-<nut-signature  
+<template>
+  <nut-signature  
     @confirm="confirm" 
     @clear="clear"
-></nut-signature>
-<p class="demo-tips demo">Tips: 点击确认按钮,下方显示签名图片</p>
-```
-```javascript
+  ></nut-signature>
+  <p class="demo-tips demo">Tips: 点击确认按钮,下方显示签名图片</p>
+</template>
+<script>
 export default {
-    data(){
-        return{
-        }
-    },
-    methods:{
-        confirm(canvas, data) {
+    props: {},
+    setup() {
+        const confirm = (canvas, data) => {
             let img = document.createElement('img');
             img.src = data;
             document.querySelector('.demo').appendChild(img);
-        },
-
-        clear() {
+        };
+        const clear = () => {
             let img = document.querySelector('.demo img'); 
             if (img) {
                 img.remove();
             }
         }
+        return { confirm, clear };
     }
 }
+</script>
+<script>
+import { reactive } from 'vue';
+export default {
+  props: {},
+  setup() {
+    const confirm = (canvas, data) => {
+        let img = document.createElement('img');
+        img.src = data;
+        document.querySelector('.demo').appendChild(img);
+    };
+    const clear = () => {
+        let img = document.querySelector('.demo img'); 
+        if (img) {
+            img.remove();
+        }
+    }
+    return { confirm, clear };
+  }
+};
+</script>
 ```
-
+:::
 ### 修改颜色和签字粗细
 
+:::demo
+
 ```html
-<nut-signature  
+<template>
+  <nut-signature  
     :lineWidth="lineWidth" 
     :strokeStyle="strokeStyle"
-></nut-signature>
+    @confirm="confirm" 
+    @clear="clear"
+  ></nut-signature>
+  <p class="demo-tips demo">Tips: 点击确认按钮,下方显示签名图片</p>
+</template>
+<script>
+import { reactive } from 'vue';
+export default {
+  props: {},
+  setup() {
+    const state = reactive({
+      lineWidth: 4,
+      strokeStyle: 'green'
+    });
+    const confirm = (canvas, data) => {
+        let img = document.createElement('img');
+        img.src = data;
+        document.querySelector('.demo').appendChild(img);
+    };
+    const clear = () => {
+        let img = document.querySelector('.demo img'); 
+        if (img) {
+            img.remove();
+        }
+    }
+    return { ...state, confirm, clear };
+  }
+};
+</script>
 
 ```
-    
+:::  
 ## API
     
 ### Props

src/packages/__VUE/textarea/doc.md

@@ -20,42 +20,55 @@ app.use(TextArea);
 ## 代码演示
 
 ### 基础用法
-
+:::demo
 
 ```html
-<nut-textarea v-model="value" />
-```
-``` javascript
+<template>
+  <nut-textarea v-model="value" />
+</template>
+<script>
 import { ref } from 'vue';
-
 export default {
   setup() {
     const value = ref('');
     return { value };
   },
 };
+</script>
 ```
+:::
 
 ### 显示字数统计
 
+:::demo
 
 ```html
-<nut-textarea v-model="value" limit-show max-length="20" />
+<template>
+  <nut-textarea v-model="value" limit-show max-length="20" />
+</template>
 ```
+:::
 
 ### 高度自定义，拉伸
-
+:::demo
 
 ```html
-<nut-textarea v-model="value" rows="10" autosize />
+<template>
+  <nut-textarea v-model="value" rows="10" autosize />
+</template>
 ```
+:::
 ### 只读、禁用
 
+:::demo
 
 ```html
-<nut-textarea readonly model-value="textarea只读状态" />
-<nut-textarea disabled model-value="textarea禁用状态" limit-show max-length="20" />
+<template>
+  <nut-textarea readonly model-value="textarea只读状态" />
+  <nut-textarea disabled model-value="textarea禁用状态" limit-show max-length="20" />
+</template>
 ```
+:::
 
 
 ### Prop