docs(cascader、empty、grid、indicator): 增加在线调试功能

src/packages/__VUE/cascader/doc.md

@@ -20,8 +20,10 @@ app.use(Cascader);
 ### 基础用法
 
 传入`options`列表。
+:::demo
 ```html
-<nut-form>
+<template>
+ <nut-form>
   <nut-form-item label="选择地址">
     <input
       class="nut-input-text"
@@ -40,77 +42,87 @@ app.use(Cascader);
       :options="state.options"
     ></nut-cascader>
   </nut-form-item>
-</nut-form>
-```
-
-```javascript
-setup() {
-  const state = reactive({
-    visible: false,
-    value: ['湖南'],
-    options: [
-      {
-        value: '浙江',
-        text: '浙江',
-        children: [
-          {
-            value: '杭州',
-            text: '杭州',
-            disabled: true,
-            children: [
-              { value: '西湖区', text: '西湖区' },
-              { value: '余杭区', text: '余杭区' }
-            ]
-          },
-          {
-            value: '温州',
-            text: '温州',
-            children: [
-              { value: '鹿城区', text: '鹿城区' },
-              { value: '瓯海区', text: '瓯海区' }
-            ]
-          }
-        ]
-      },
-      {
-        value: '湖南',
-        text: '湖南',
-        disabled: true
+ </nut-form>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    // 基础用法
+    const state = reactive({
+      visible: false,
+      // value: ['湖南'],
+      value: [],
+      options: [
+        {
+          value: '浙江',
+          text: '浙江',
+          children: [
+            {
+              value: '杭州',
+              text: '杭州',
+              disabled: true,
+              children: [
+                { value: '西湖区', text: '西湖区' },
+                { value: '余杭区', text: '余杭区' }
+              ]
+            },
+            {
+              value: '温州',
+              text: '温州',
+              children: [
+                { value: '鹿城区', text: '鹿城区' },
+                { value: '瓯海区', text: '瓯海区' }
+              ]
+            }
+          ]
+        },
+        {
+          value: '湖南',
+          text: '湖南',
+          disabled: true
+        },
+        {
+          value: '福建',
+          text: '福建',
+          children: [
+            {
+              value: '福州',
+              text: '福州',
+              children: [
+                { value: '鼓楼区', text: '鼓楼区' },
+                { value: '台江区', text: '台江区' }
+              ]
+            }
+          ]
+        }
+      ]
+    });
+    const events = {
+      change(...args: any) {
+        console.log('change', ...args);
       },
-      {
-        value: '福建',
-        text: '福建',
-        children: [
-          {
-            value: '福州',
-            text: '福州',
-            children: [
-              { value: '鼓楼区', text: '鼓楼区' },
-              { value: '台江区', text: '台江区' }
-            ]
-          }
-        ]
+      pathChange(...args: any) {
+        console.log('pathChange', ...args);
       }
-    ]
-  });
-  const events = {
-    change(...args: any) {
-      console.log('change', ...args);
-    },
-    pathChange(...args: any) {
-      console.log('pathChange', ...args);
-    },
-  };
+    };
 
-  return { state, events };
+    return {
+      state,
+      events
+    }
+  }
 }
 ```
+:::
 
 ### 自定义属性名称
 
 可通过`textKey`、`valueKey`、`childrenKey`指定属性名。
+:::demo
 ```html
-<nut-form>
+<template>
+ <nut-form>
   <nut-form-item label="选择地址">
     <input
       class="nut-input-text"
@@ -132,58 +144,64 @@ setup() {
       :options="state.options"
     ></nut-cascader>
   </nut-form-item>
-</nut-form>
-```
-
-```javascript
-setup() {
-  const state = reactive({
-    visible: false,
-    value: ['浙江', '杭州', '西湖区'],
-    options: [
-      {
-        text: '浙江',
-        items: [
-          {
-            text: '杭州',
-            disabled: true,
-            items: [{ text: '西湖区' }, { text: '余杭区' }]
-          },
-          {
-            text: '温州',
-            items: [{ text: '鹿城区' }, { text: '瓯海区' }]
-          }
-        ]
+ </nut-form>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    // 自定义属性名称
+    const state = reactive({
+      visible: false,
+      value: ['福建', '福州', '台江区'],
+      options: [
+        {
+          text: '浙江',
+          items: [
+            {
+              text: '杭州',
+              disabled: true,
+              items: [{ text: '西湖区' }, { text: '余杭区' }]
+            },
+            {
+              text: '温州',
+              items: [{ text: '鹿城区' }, { text: '瓯海区' }]
+            }
+          ]
+        },
+        {
+          text: '福建',
+          items: [
+            {
+              text: '福州',
+              items: [{ text: '鼓楼区' }, { text: '台江区' }]
+            }
+          ]
+        }
+      ]
+    });
+    const events = {
+      change(...args: any) {
+        console.log('change', ...args);
       },
-      {
-        text: '福建',
-        items: [
-          {
-            text: '福州',
-            items: [{ text: '鼓楼区' }, { text: '台江区' }]
-          }
-        ]
-      }
-    ]
-  });
-  const events = {
-    change(...args: any) {
-      console.log('change', ...args);
-    },
-    pathChange(...args: any) {
-      console.log('pathChange', ...args);
-    },
-  };
+      pathChange(...args: any) {
+        console.log('pathChange', ...args);
+      },
+    };
 
-  return { state, events };
+    return { state, events };
+  }
 }
 ```
+:::
 
 ### 动态加载
 
 使用`lazy`标识是否需要动态获取数据，此时不传`options`代表所有数据都需要通过`lazyLoad`加载，首次加载通过`root`属性区分，当遇到非叶子节点时会调用`lazyLoad`方法，参数为当前节点和`resolve`方法，注意`resolve`方法必须调用，不传子节点时会被当做叶子节点处理。
+:::demo
 ```html
-<nut-form>
+<template>
+ <nut-form>
   <nut-form-item label="选择地址">
     <input
       class="nut-input-text"
@@ -203,55 +221,60 @@ setup() {
       :lazy-load="state.lazyLoad"
     ></nut-cascader>
   </nut-form-item>
-</nut-form>
-```
-
-```javascript
-setup() {
-  const state = reactive({
-    visible: false,
-    value: ['A0', 'A12', 'A23', 'A32'],
-    lazyLoad(node: any, resolve: (children: any) => void) {
-      setTimeout(() => {
-        // root表示第一层数据
-        if (node.root) {
-          resolve([
-            { value: 'A0', text: 'A0' },
-            { value: 'B0', text: 'B0' },
-            { value: 'C0', text: 'C0' }
-          ]);
-        } else {
-          const { value, level } = node;
-          const text = value.substring(0, 1);
-          const value1 = `${text}${level + 1}1`;
-          const value2 = `${text}${level + 1}2`;
-          const value3 = `${text}${level + 1}3`;
-          resolve([
-            { value: value1, text: value1, leaf: level >= 6 },
-            { value: value2, text: value2, leaf: level >= 6 },
-            { value: value3, text: value3, leaf: level >= 6 }
-          ]);
-        }
-      }, 300);
-    }
-  });
-  const events = {
-    change(...args: any) {
-      console.log('change', ...args);
-    },
-    pathChange(...args: any) {
-      console.log('pathChange', ...args);
-    },
-  };
+ </nut-form>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      visible: false,
+      value: ['A0', 'A12', 'A23', 'A32'],
+      lazyLoad(node: any, resolve: (children: any) => void) {
+        setTimeout(() => {
+          // root表示第一层数据
+          if (node.root) {
+            resolve([
+              { value: 'A0', text: 'A0' },
+              { value: 'B0', text: 'B0' },
+              { value: 'C0', text: 'C0' }
+            ]);
+          } else {
+            const { value, level } = node;
+            const text = value.substring(0, 1);
+            const value1 = `${text}${level + 1}1`;
+            const value2 = `${text}${level + 1}2`;
+            const value3 = `${text}${level + 1}3`;
+            resolve([
+              { value: value1, text: value1, leaf: level >= 6 },
+              { value: value2, text: value2, leaf: level >= 6 },
+              { value: value3, text: value3, leaf: level >= 6 }
+            ]);
+          }
+        }, 300);
+      }
+    });
+    const events = {
+      change(...args: any) {
+        console.log('change', ...args);
+      },
+      pathChange(...args: any) {
+        console.log('pathChange', ...args);
+      },
+    };
 
-  return { state, events };
+    return { state, events };
+  }
 }
 ```
+:::
 
 ### 部分数据动态加载
 
+:::demo
 ```html
-<nut-form>
+<template>
+ <nut-form>
   <nut-form-item label="选择地址">
     <input
       class="nut-input-text"
@@ -272,59 +295,64 @@ setup() {
       :lazy-load="state.lazyLoad"
     ></nut-cascader>
   </nut-form-item>
-</nut-form>
-```
-
-```javascript
-setup() {
-  const state = reactive({
-    visible: false,
-    value: [],
-    options: [
-      { value: 'A0', text: 'A0' },
-      {
-        value: 'B0',
-        text: 'B0',
-        children: [
-          { value: 'B11', text: 'B11', leaf: true },
-          { value: 'B12', text: 'B12' }
-        ]
+ </nut-form>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      visible: false,
+      value: [],
+      options: [
+        { value: 'A0', text: 'A0' },
+        {
+          value: 'B0',
+          text: 'B0',
+          children: [
+            { value: 'B11', text: 'B11', leaf: true },
+            { value: 'B12', text: 'B12' }
+          ]
+        },
+        { value: 'C0', text: 'C0' }
+      ],
+      lazyLoad(node: any, resolve: (children: any) => void) {
+        setTimeout(() => {
+          const { value, level } = node;
+          const text = value.substring(0, 1);
+          const value1 = `${text}${level + 1}1`;
+          const value2 = `${text}${level + 1}2`;
+          resolve([
+            { value: value1, text: value1, leaf: level >= 2 },
+            { value: value2, text: value2, leaf: level >= 1 }
+          ]);
+        }, 500);
+      }
+    });
+    const events = {
+      change(...args: any) {
+        console.log('change', ...args);
       },
-      { value: 'C0', text: 'C0' }
-    ],
-    lazyLoad(node: any, resolve: (children: any) => void) {
-      setTimeout(() => {
-        const { value, level } = node;
-        const text = value.substring(0, 1);
-        const value1 = `${text}${level + 1}1`;
-        const value2 = `${text}${level + 1}2`;
-        resolve([
-          { value: value1, text: value1, leaf: level >= 2 },
-          { value: value2, text: value2, leaf: level >= 1 }
-        ]);
-      }, 500);
-    }
-  });
-  const events = {
-    change(...args: any) {
-      console.log('change', ...args);
-    },
-    pathChange(...args: any) {
-      console.log('pathChange', ...args);
-    },
-  };
+      pathChange(...args: any) {
+        console.log('pathChange', ...args);
+      },
+    };
 
-  return { state, events };
+    return { state, events };
+  }
 }
 ```
+:::
 
 ### 自动转换
 
 如果你的数据为可转换为树形结构的扁平结构时，可以通过`convertConfig`告诉组件需要进行自动转换，`convertConfig`接受4个参数，`topId`为顶层节点的父级id，`idKey`为节点唯一id，`pidKey`为指向父节点id的属性名，存在`sortKey`将根据指定字段调用Array.prototype.sort()进行同层排序。
 
 
+:::demo
 ```html
-<nut-form>
+<template>
+ <nut-form>
   <nut-form-item label="选择地址" @click="state.visible = true">
     <input
       class="nut-input-text"
@@ -344,40 +372,43 @@ setup() {
       :convertConfig="state.convertConfig"
     ></nut-cascader>
   </nut-form-item>
-</nut-form>
-```
-
-```javascript
-setup() {
-  const state = reactive({
-    visible: false,
-    value: ['广东省', '广州市'],
-    convertConfig: {
-      topId: null,
-      idKey: 'id',
-      pidKey: 'pid',
-      sortKey: ''
-    },
-    options: [
-      { value: '北京', text: '北京', id: 1, pid: null },
-      { value: '朝阳区', text: '朝阳区', id: 11, pid: 1 },
-      { value: '亦庄', text: '亦庄', id: 111, pid: 11 },
-      { value: '广东省', text: '广东省', id: 2, pid: null },
-      { value: '广州市', text: '广州市', id: 21, pid: 2 }
-    ]
-  });
-  const events = {
-    change(...args: any) {
-      console.log('change', ...args);
-    },
-    pathChange(...args: any) {
-      console.log('pathChange', ...args);
-    },
-  };
+ </nut-form>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      visible: false,
+      value: ['广东省', '广州市'],
+      convertConfig: {
+        topId: null,
+        idKey: 'id',
+        pidKey: 'pid',
+        sortKey: ''
+      },
+      options: [
+        { value: '北京', text: '北京', id: 1, pid: null },
+        { value: '朝阳区', text: '朝阳区', id: 11, pid: 1 },
+        { value: '亦庄', text: '亦庄', id: 111, pid: 11 },
+        { value: '广东省', text: '广东省', id: 2, pid: null },
+        { value: '广州市', text: '广州市', id: 21, pid: 2 }
+      ]
+    });
+    const events = {
+      change(...args: any) {
+        console.log('change', ...args);
+      },
+      pathChange(...args: any) {
+        console.log('pathChange', ...args);
+      },
+    };
 
-  return { state, events };
+    return { state, events };
+  }
 }
 ```
+:::
 
 ## API
 

src/packages/__VUE/empty/doc.md

@@ -18,35 +18,49 @@ app.use(Empty);
 ```
 
 ### 基础用法
+:::demo
 ```html
-<nut-empty description="无数据"></nut-empty>
+<template>
+    <nut-empty description="无数据"></nut-empty>
+</template>
 ```
+:::
 
 ### 图片类型，内置 3 个
+:::demo
 ```html
-<nut-empty image="empty" description="无内容"></nut-empty>
-    
-<nut-empty image="error" description="加载失败/错误"></nut-empty>
-
-<nut-empty image="network" description="无网络"></nut-empty>
+<template>
+    <nut-empty image="empty" description="无内容"></nut-empty>
+    <nut-empty image="error" description="加载失败/错误"></nut-empty>
+    <nut-empty image="network" description="无网络"></nut-empty>
+</template>
 ```
+:::
 ### 自定义图片
+:::demo
 ```html
-<nut-empty description="无优惠券">
-    <template #image>
-        <img src="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png" />
-    </template>
-</nut-empty>
+<template>
+    <nut-empty description="无优惠券">
+        <template #image>
+            <img src="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png" />
+        </template>
+    </nut-empty>
+</template>
 ```
+:::
 
 ### 底部内容
+:::demo
 ```html
-<nut-empty image="error" description="加载失败">
-    <div style="margin-top: 10px">
-        <nut-button icon="refresh" type="primary">重试</nut-button>
-    </div>
-</nut-empty>
+<template>
+    <nut-empty image="error" description="加载失败">
+        <div style="margin-top: 10px">
+            <nut-button icon="refresh" type="primary">重试</nut-button>
+        </div>
+    </nut-empty>
+</template>
 ```
+:::
 
 ## API
 

src/packages/__VUE/grid/doc.md

@@ -20,107 +20,143 @@ app.use(GridItem);
 
 ### 基础用法
 
-``` html
-<nut-grid>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-</nut-grid>
+:::demo
+```html
+<template>
+  <nut-grid>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+  </nut-grid>
+</template>
 ```
+:::
 
 ### 自定义列数
 
-``` html
-<nut-grid :column-num="3">
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-</nut-grid>
+:::demo
+```html
+<template>
+  <nut-grid :column-num="3">
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+  </nut-grid>
+</template>
 ```
+:::
 
 ### 正方形格子
 
-``` html
-<nut-grid :column-num="3" square>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-</nut-grid>
+:::demo
+```html
+<template>
+  <nut-grid :column-num="3" square>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+  </nut-grid>
+</template>
 ```
+:::
 
 ### 格子间距
 
-``` html
-<nut-grid :gutter="10">
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-</nut-grid>
+:::demo
+```html
+<template>
+  <nut-grid :gutter="10">
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+  </nut-grid>
+</template>
 ```
+:::
 
 ### 内容翻转
 
-``` html
-<nut-grid reverse>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-</nut-grid>
+:::demo
+```html
+<template>
+  <nut-grid reverse>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+  </nut-grid>
+</template>
 ```
+:::
 
 ### 内容横向
 
-``` html
-<nut-grid direction="horizontal">
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-</nut-grid>
+:::demo
+```html
+<template>
+  <nut-grid direction="horizontal">
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+  </nut-grid>
+</template>
 ```
+:::
 
 ### 图标颜色/大小
 
-``` html
-<nut-grid :column-num="3" icon-color="#fa2c19">
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" icon-color="#478EF2" icon-size="40" text="文字"></nut-grid-item>
-  <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-</nut-grid>
+:::demo
+```html
+<template>
+  <nut-grid :column-num="3" icon-color="#fa2c19">
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" icon-color="#478EF2" icon-size="40" text="文字"></nut-grid-item>
+    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+  </nut-grid>
+</template>
 ```
+:::
 
 ### 页面导航
 
-``` html
-<nut-grid :column-num="2">
-  <nut-grid-item icon="home" text="路由跳转 ’/‘ " to="/"></nut-grid-item>
-  <nut-grid-item icon="search" text="URL 跳转" url="https://jd.com"></nut-grid-item>
-</nut-grid>
+:::demo
+```html
+<template>
+  <nut-grid :column-num="2">
+    <nut-grid-item icon="home" text="路由跳转 ’/‘ " to="/"></nut-grid-item>
+    <nut-grid-item icon="search" text="URL 跳转" url="https://jd.com"></nut-grid-item>
+  </nut-grid>
+</template>
 ```
+:::
 
 ### 自定义内容
 
-``` html
-<nut-grid :border="false">
-  <nut-grid-item v-for="i in 4" :key="i">
-    <nut-avatar
-      size="large"
-      icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-    />
-  </nut-grid-item>
-</nut-grid>
+:::demo
+```html
+<template>
+  <nut-grid :border="false">
+    <nut-grid-item v-for="i in 4" :key="i">
+      <nut-avatar
+        size="large"
+        icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+      />
+    </nut-grid-item>
+  </nut-grid>
+</template>
 ```
+:::
 
 ### Grid Props
 

src/packages/__VUE/indicator/doc.md

@@ -21,7 +21,9 @@ app.use(Indicator);
 
 ### 基础用法
 
+:::demo
 ```html
+<template>
   <nut-cell>
     <nut-indicator :size="3" :current="3">step1</nut-indicator>
   </nut-cell>
@@ -35,10 +37,14 @@ app.use(Indicator);
       </nut-col>
     </nut-row>
   </nut-cell>
+</template>
 ```
+:::
 
 ### block用法
+:::demo
 ```html
+<template>
     <nut-cell>
       <nut-indicator :block="true" algin="center" :size="6" :current="5">step1</nut-indicator>
     </nut-cell>
@@ -48,14 +54,20 @@ app.use(Indicator);
     <nut-cell>
       <nut-indicator :block="true" align="right" :size="6" :current="5">step1</nut-indicator>
     </nut-cell>
+</template>
 ```
+:::
 
 ### 不补0
+:::demo
 ```html
+<template>
     <nut-cell>
       <nut-indicator :fill-zero="false" :size="6" :current="5">step1</nut-indicator>
     </nut-cell>
+</template>
 ```
+:::
 
 
 ## API