组件在线调试接入及bug修复 (#977)

* upd: 组件在线调试接入

* fix: navbar 样式问题

src/packages/__VUE/backtop/doc.md

@@ -21,43 +21,247 @@ app.use(Icon);
 
 ### 基本用法
 
+:::demo
 ```html
-<nut-backtop  el-id="elId" ></nut-backtop>
+
+<template>
+  <div class="demo" id="elId">
+    <div class="text-data">我是测试数据1</div>
+    <div class="text-data">我是测试数据2</div>
+    <div class="text-data">我是测试数据3</div>
+    <div class="text-data">我是测试数据4</div>
+    <div class="text-data">我是测试数据5</div>
+    <div class="text-data">我是测试数据6</div>
+    <div class="text-data">我是测试数据7</div>
+    <div class="text-data">我是测试数据8</div>
+    <div class="text-data">我是测试数据9</div>
+    <div class="text-data">我是测试数据10</div>
+    <div class="text-data">我是测试数据11</div>
+    <div class="text-data">我是测试数据12</div>
+    <div class="text-data">我是测试数据13</div>
+    <div class="text-data">我是测试数据14</div>
+    <div class="text-data">我是测试数据15</div>
+    <div class="text-data">我是测试数据16</div>
+    <div class="text-data">我是测试数据17</div>
+    <div class="text-data">我是测试数据18</div>
+    <div class="text-data">我是测试数据19</div>
+    <div class="text-data">我是测试数据20</div>
+    <div class="text-data">我是测试数据21</div>
+    <div class="text-data">我是测试数据22</div>
+    <div class="text-data">我是测试数据23</div>
+    <div class="text-data">我是测试数据24</div>
+    <nut-backtop ></nut-backtop>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo {
+  .text-data {
+    margin: 0 auto;
+    margin-top: 15px;
+    margin-bottom: 20px;
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 46px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 7px;
+    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+    line-height: 19px;
+    font-size: 13px;
+    color: rgba(102, 102, 102, 1);
+  }
+}
+</style>
+
 ```
+:::
 
 ### 设置出现位置
 
+:::demo
 ```html
-<nut-backtop :distance="200" ></nut-backtop>
+<template>
+  <div class="demo" id="elId">
+    <div class="text-data">我是测试数据1</div>
+    <div class="text-data">我是测试数据2</div>
+    <div class="text-data">我是测试数据3</div>
+    <div class="text-data">我是测试数据4</div>
+    <div class="text-data">我是测试数据5</div>
+    <div class="text-data">我是测试数据6</div>
+    <div class="text-data">我是测试数据7</div>
+    <div class="text-data">我是测试数据8</div>
+    <div class="text-data">我是测试数据9</div>
+    <div class="text-data">我是测试数据10</div>
+    <div class="text-data">我是测试数据11</div>
+    <div class="text-data">我是测试数据12</div>
+    <div class="text-data">我是测试数据13</div>
+    <div class="text-data">我是测试数据14</div>
+    <div class="text-data">我是测试数据15</div>
+    <div class="text-data">我是测试数据16</div>
+    <div class="text-data">我是测试数据17</div>
+    <div class="text-data">我是测试数据18</div>
+    <div class="text-data">我是测试数据19</div>
+    <div class="text-data">我是测试数据20</div>
+    <div class="text-data">我是测试数据21</div>
+    <div class="text-data">我是测试数据22</div>
+    <div class="text-data">我是测试数据23</div>
+    <div class="text-data">我是测试数据24</div>
+    <nut-backtop :distance="200" ></nut-backtop>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo {
+  .text-data {
+    margin: 0 auto;
+    margin-top: 15px;
+    margin-bottom: 20px;
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 46px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 7px;
+    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+    line-height: 19px;
+    font-size: 13px;
+    color: rgba(102, 102, 102, 1);
+  }
+}
+</style>
 ```
+:::
 
 ### 自定义样式
 
+:::demo
 ```html
-<nut-backtop @click="handleClick" el-id="elId" :distance="100" :bottom="90" ><div>无</div></nut-backtop>
+<template>
+  <div class="demo" id="elId">
+    <div class="text-data">我是测试数据1</div>
+    <div class="text-data">我是测试数据2</div>
+    <div class="text-data">我是测试数据3</div>
+    <div class="text-data">我是测试数据4</div>
+    <div class="text-data">我是测试数据5</div>
+    <div class="text-data">我是测试数据6</div>
+    <div class="text-data">我是测试数据7</div>
+    <div class="text-data">我是测试数据8</div>
+    <div class="text-data">我是测试数据9</div>
+    <div class="text-data">我是测试数据10</div>
+    <div class="text-data">我是测试数据11</div>
+    <div class="text-data">我是测试数据12</div>
+    <div class="text-data">我是测试数据13</div>
+    <div class="text-data">我是测试数据14</div>
+    <div class="text-data">我是测试数据15</div>
+    <div class="text-data">我是测试数据16</div>
+    <div class="text-data">我是测试数据17</div>
+    <div class="text-data">我是测试数据18</div>
+    <div class="text-data">我是测试数据19</div>
+    <div class="text-data">我是测试数据20</div>
+    <div class="text-data">我是测试数据21</div>
+    <div class="text-data">我是测试数据22</div>
+    <div class="text-data">我是测试数据23</div>
+    <div class="text-data">我是测试数据24</div>
+    <nut-backtop @click="handleClick" :distance="100" :bottom="90" ><div>无</div></nut-backtop>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo {
+  .text-data {
+    margin: 0 auto;
+    margin-top: 15px;
+    margin-bottom: 20px;
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 46px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 7px;
+    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+    line-height: 19px;
+    font-size: 13px;
+    color: rgba(102, 102, 102, 1);
+  }
+}
+</style>
 ```
+:::
 
 ### click事件
 
+:::demo
 ```html
-<nut-backtop @click="handleClick" ></nut-backtop>
-```
+<template>
+  <div class="demo" id="elId">
+    <div class="text-data">我是测试数据1</div>
+    <div class="text-data">我是测试数据2</div>
+    <div class="text-data">我是测试数据3</div>
+    <div class="text-data">我是测试数据4</div>
+    <div class="text-data">我是测试数据5</div>
+    <div class="text-data">我是测试数据6</div>
+    <div class="text-data">我是测试数据7</div>
+    <div class="text-data">我是测试数据8</div>
+    <div class="text-data">我是测试数据9</div>
+    <div class="text-data">我是测试数据10</div>
+    <div class="text-data">我是测试数据11</div>
+    <div class="text-data">我是测试数据12</div>
+    <div class="text-data">我是测试数据13</div>
+    <div class="text-data">我是测试数据14</div>
+    <div class="text-data">我是测试数据15</div>
+    <div class="text-data">我是测试数据16</div>
+    <div class="text-data">我是测试数据17</div>
+    <div class="text-data">我是测试数据18</div>
+    <div class="text-data">我是测试数据19</div>
+    <div class="text-data">我是测试数据20</div>
+    <div class="text-data">我是测试数据21</div>
+    <div class="text-data">我是测试数据22</div>
+    <div class="text-data">我是测试数据23</div>
+    <div class="text-data">我是测试数据24</div>
+    <nut-backtop @click="handleClick" ></nut-backtop>
+  </div>
+</template>
 
-```html
 <script>
-export default createDemo({
-  setup(props, { emit }) {
-    const handleClick = () => {
-      console.log('触发返回顶部');
-    };
-
-    return {
-      handleClick
-    };
-  }
-});
+  export default {
+    setup() {
+      const handleClick = () => {
+        console.log('触发返回顶部');
+      };
+
+      return {
+        handleClick
+      };
+    }
+  };
 </script>
+
+<style lang="scss" scoped>
+.demo {
+  .text-data {
+    margin: 0 auto;
+    margin-top: 15px;
+    margin-bottom: 20px;
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 46px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 7px;
+    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+    line-height: 19px;
+    font-size: 13px;
+    color: rgba(102, 102, 102, 1);
+  }
+}
+</style>
 ```
+:::
 
 
 ### API

src/packages/__VUE/badge/doc.md

@@ -23,96 +23,192 @@ app.use(Badge);
 
 ### 基本用法
 
+:::demo
 ```html
-<nut-badge :value="8">
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
-<nut-badge :value="76">
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
-<nut-badge value="NEW">
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
-<nut-badge dot>
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
+<template>
+  <div class="demo">
+    <nut-badge :value="8">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="76">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge value="NEW">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge dot>
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo{
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
+</style>
+
 ```
+:::
 
 ### 最大值
 
+:::demo
 ```html
-<nut-badge :value="200" :max="9">
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
-<nut-badge :value="200" :max="20">
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
-<nut-badge :value="200" :max="99">
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
+<template>
+  <div class="demo">
+    <nut-badge :value="200" :max="9">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="200" :max="20">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="200" :max="99">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo{
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
+</style>
+
 ```
+:::
 
 ### 自定义颜色
 
+:::demo
 ```html
-<nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
-<nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
-<nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
-<nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
+<template>
+  <div class="demo">
+    <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo{
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
+</style>
+
 ```
+:::
 
 ### 自定义徽标内容
 
+:::demo
 ```html
-<nut-badge>
-  <template #icons>
-    <nut-icon name="Check" color="#ffffff" size="12"></nut-icon>
-  </template>
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
-<nut-badge>
-  <template #icons>
-    <nut-icon name="link" color="#ffffff" size="12"></nut-icon>
-  </template>
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
-<nut-badge>
-  <template #icons>
-    <nut-icon name="download" color="#ffffff" size="12"></nut-icon>
-  </template>
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
+<template>
+  <div class="demo">
+    <nut-badge>
+      <template #icons>
+        <nut-icon name="Check" color="#ffffff" size="12"></nut-icon>
+      </template>
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge>
+      <template #icons>
+        <nut-icon name="link" color="#ffffff" size="12"></nut-icon>
+      </template>
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge>
+      <template #icons>
+        <nut-icon name="download" color="#ffffff" size="12"></nut-icon>
+      </template>
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo{
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
+</style>
+
 ```
+:::
 
 ### 自定义位置
 
+:::demo
 ```html
-<nut-badge :value="8" top="5" right="5">
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
-<nut-badge :value="76" top="10" right="10">
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
-<nut-badge value="NEW">
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-</nut-badge>
+<template>
+  <div class="demo">
+    <nut-badge :value="8" top="5" right="5">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="76" top="10" right="10">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge value="NEW">
+      <nut-avatar icon="my" shape="square"></nut-avatar>
+    </nut-badge>
+   </div>
+</template>
+
+<style lang="scss" scoped>
+.demo{
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
+</style>
+
 ```
+:::
 
 ### 独立展示
 
+:::demo
 ```html
-<nut-badge :value="8"> </nut-badge>
-<nut-badge :value="76"> </nut-badge>
-<nut-badge value="NEW"> </nut-badge>
+<template>
+  <div class="demo">
+    <nut-badge :value="8"> </nut-badge>
+    <nut-badge :value="76"> </nut-badge>
+    <nut-badge value="NEW"> </nut-badge>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo{
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
+</style>
+
 ```
+:::
 
 
 ### Prop  

src/packages/__VUE/navbar/index.scss

@@ -10,6 +10,7 @@
   font-size: $cell-title-font;
   color: $cell-color;
   margin-bottom: 20px;
+  overflow: hidden;
   &:active::before {
     opacity: 0.1;
   }

src/packages/__VUE/popover/doc.md

@@ -25,180 +25,270 @@ app.use(Popover);
 
 Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 theme 属性设置为 dark 可切换为暗黑风格。
 
+:::demo
 ```html
-  <nut-popover
-      :visible="visible"
-      :list="List"
-      @open="open"
-      @close="close"
-    >
-      <template #reference>
-        <nut-button type="primary" shape="square">明朗风格</nut-button>
-      </template>
-    </nut-popover>
-
-  <nut-popover
-      :visible="visible"
-      theme="dark"
-      :list="List"
-      @open="open"
-      @close="close"
-    >
-      <template #reference>
-        <nut-button type="primary" shape="square">暗黑风格</nut-button>
-      </template>
-    </nut-popover>
-```
-
-```javascript
+<template>
+  <nut-popover v-model:visible="visible.lightTheme" :list="iconItemList">
+    <template #reference>
+      <nut-button type="primary" shape="square">明朗风格</nut-button>
+    </template>
+  </nut-popover>
+</template>
+<script>
+import { reactive, ref } from 'vue';
+export default {
+  setup() {
+    const visible = ref({
+     lightTheme: false,
+    });
+
+    const iconItemList = reactive([
+      {
+        name: '选项一'
+      },
+      {
+        name: '选项二'
+      },
+      {
+        name: '选项三'
+      }
+    ]);
+
+    return {
+        visible,
+        iconItemList,
+      };
+    }
+}
+</script>
 
-  setup(){
-  const visible = ref(false);
-  const List =  [
-    {name: '选项一'},
-    {name: '选项二'},
-    {name: '选项三'}];
-  }
 
-  const open = () =>{
-      visible.value = true;
-  }
-  const close = () =>{
-      visible.value = false;
-  }
 
 ```
+:::
 
 ### 选项配置
 
-```html
-  <nut-popover
-      :visible="visible"
-      theme="dark"
-      :list="List"
-      @open="open"
-      @close="close"
-    >
-      <template #reference>
-        <nut-button type="primary" shape="square">展示图标</nut-button>
-      </template>
-    </nut-popover>
-
-```
-
-
-```javascript
-
-  setup(){
-    const visible = ref(false);
-    const List = [
-      {name: '选项一',icon: 'my2'},
-      {name: '选项二',icon: 'cart2'},
-      {name: '选项三',icon: 'location2'}
-    ],
-
-    const open = () =>{
-      visible.value =   true;
-    }
-    const close = () =>{
-      visible.value =  false;
-    }
-  }
-
-
-```
-
-
 在 list 数组中，可以通过 disabled 字段来禁用某个选项。
 
+:::demo
 ```html
-  <nut-popover
-      :visible="visible"
-      :list="List"
-      @open="open"
-      @close="close"
-    >
-      <template #reference>
-        <nut-button type="primary" shape="square">禁用选项</nut-button>
-      </template>
-    </nut-popover>
-```
-
-
-```javascript
-
+<template>
+  <nut-popover v-model:visible="visible.showIcon" theme="dark" :list="itemList">
+    <template #reference>
+      <nut-button type="primary" shape="square">展示图标</nut-button>
+    </template>
+  </nut-popover>
 
-  setup(){
-    const visible = ref(false);
-    const List = [{
-              name: '选项一',
-              disabled: true
-            },
-            {
-              name: '选项二',
-              disabled: true
-            },
-            {
-              name: '选项三'
-            }],
-
-    const open = () =>{
-      visible.value =   true;
-    }
-    const close = () =>{
-      visible.value =  false;
+  <nut-popover v-model:visible="visible.disableAction" :list="itemListDisabled">
+    <template #reference>
+      <nut-button type="primary" shape="square">禁用选项</nut-button>
+    </template>
+  </nut-popover>
+</template>
+
+<script>
+import { reactive, ref } from 'vue';
+export default {
+  setup() {
+    const visible = ref({
+      showIcon: false,
+      disableAction: false,
+    });
+
+    const itemList = reactive([
+      {
+        name: '选项一',
+        icon: 'my2'
+      },
+      {
+        name: '选项二',
+        icon: 'cart2'
+      },
+      {
+        name: '选项三',
+        icon: 'location2'
+      }
+    ]);
+
+    const itemListDisabled = reactive([
+      {
+        name: '选项一',
+        disabled: true
+      },
+      {
+        name: '选项二',
+        disabled: true
+      },
+      {
+        name: '选项三'
+      }
+    ]);
+
+    return {
+        itemList,
+        visible,
+        itemListDisabled,
+      };
     }
-  }
+}
+</script>
+
 
 ```
+:::
+
 
 ### 自定义内容
 
 在名为 content 插槽中自定义内容。
 
+:::demo
 ```html
-  <nut-popover 
-      :visible="visible"
-      @open="open"
-      @close="close">
-      <template #reference>
-        <nut-button type="primary" shape="square">自定义内容</nut-button>
-      </template>
-
-      <template #content>
-        <div class="self-content">
-          <div
-                      class="self-content-item"
-                      v-for="(item, index) in selfContent"
-                      :key="index"
-                    >
-            <nut-icon :name="item.name" size="15"></nut-icon>
-            <div class="self-content-desc">{{ item.desc }}</div>
-          </div>
+<template>
+  <nut-popover v-model:visible="visible.Customized">
+    <template #reference>
+      <nut-button type="primary" shape="square">自定义内容</nut-button>
+    </template>
+
+    <template #content>
+      <div class="self-content">
+        <div class="self-content-item" v-for="(item, index) in selfContent" :key="index">
+          <nut-icon :name="item.name" size="15"></nut-icon>
+        <div class="self-content-desc">{{ item.desc }}</div>
         </div>
-      </template>
-    </nut-popover>
+      </div>
+    </template>
+  </nut-popover>
+</template>
+
+
+<script>
+import { reactive, ref } from 'vue';
+export default {
+  setup() {
+    const visible = ref({
+      Customized: false,
+    });
+    const selfContent = reactive([
+      {
+        name: 'service',
+        desc: '选项一'
+      },
+      {
+        name: 'notice',
+        desc: '选项二'
+      },
+      {
+        name: 'location',
+        desc: '选项三'
+      },
+      {
+        name: 'category',
+        desc: '选项四'
+      },
+      {
+        name: 'scan2',
+        desc: '选项五'
+      },
+      {
+        name: 'message',
+        desc: '选项六'
+      }
+    ]);
+
+    return {
+      visible,
+      selfContent,
+    };
+  }
+}
+</script>
+
+<style lang="scss">
+.self-content {
+  width: 195px;
+  display: flex;
+  flex-wrap: wrap;
+  &-item {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  &-desc {
+    margin-top: 5px;
+    width: 60px;
+    font-size: 10px;
+    text-align: center;
+  }
+}
+</style>
+
+
 ```
+:::
 
 ### 位置自定义
 
 支持 bottom, top, left, right 四种弹出位置，默认值为 bottom。
 
+:::demo
 ```html
-  <nut-popover
-      :visible="visible"
-      location="top"
-      theme="dark"
-      :list="List"
-      @open="open"
-      @close="close"
-    >
-      <template #reference>
-        <nut-button type="primary" shape="square">向上弹出</nut-button>
-      </template>
+<template>
+  <nut-popover v-model:visible="visible.topLocation" location="top" theme="dark" :list="iconItemList">
+    <template #reference>
+      <nut-button type="primary" shape="square">向上弹出</nut-button>
+    </template>
+  </nut-popover>
+
+  <h2></h2>
+  <nut-popover v-model:visible="visible.rightLocation" location="right" theme="dark" :list="iconItemList">
+    <template #reference>
+      <nut-button type="primary" shape="square">向右弹出</nut-button>
+    </template>
   </nut-popover>
+  <nut-popover v-model:visible="visible.leftLocation" location="left" theme="dark" :list="iconItemList">
+    <template #reference>
+    <nut-button type="primary" shape="square">向左弹出</nut-button>
+    </template>
+  </nut-popover>
+</template>
+
+<script lang="ts">
+import { reactive, ref } from 'vue';
+export default {
+  setup() {
+    const visible = ref({
+      topLocation: false, 
+      rightLocation: false, 
+      leftLocation: false 
+    });
+
+    const iconItemList = reactive([
+        {
+          name: '选项一'
+        },
+        {
+          name: '选项二'
+        },
+        {
+          name: '选项三'
+        }
+      ]);
+
+      return {
+        iconItemList,
+        visible,
+      };
+    }
+};
+</script>
 
 ```
+:::
 
 
 

src/packages/__VUE/skeleton/demo.vue

@@ -56,6 +56,7 @@ export default createDemo({
 <style lang="scss">
 .content {
   .nut-switch {
+    display: flex;
     margin: 0 16px 8px 0;
   }
   .container {

src/packages/__VUE/skeleton/doc.md

@@ -23,53 +23,114 @@ app.use(Skeleton);
 
 ### 基础用法
 
+:::demo
 ```html
-<nut-skeleton width="250px" height="15px" animated> </nut-skeleton>
+<template>
+  <nut-skeleton width="250px" height="15px" animated> </nut-skeleton>
+</template>
+
 ```
+:::
 
 ### 传入多行
 
+:::demo
 ```html
- <nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton>
+<template>
+  <nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton>
+</template>
+
 ```
+:::
 
 
 ### 显示头像
 
+:::demo
 ```html
-<nut-skeleton width="250px" height="15px" title animated avatar row="3"> </nut-skeleton>
+<template>
+  <nut-skeleton width="250px" height="15px" title animated avatar row="3"> </nut-skeleton>
+</template>
 ```
+:::
 
 
 ### 标题段落圆角风格
 
+:::demo
 ```html
-<nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
+<template>
+  <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
+</template>
 ```
+:::
 
 
 ### 显示子组件
 
+:::demo
 ```html
-    <div class="content">
-      <nut-switch v-model="checked" size="15px" />
-
-      <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
-        <div class="container">
-          <nut-avatar
-            size="50"
-            icon="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-          />
-          <div class="right-content">
-            <div class="title">NutUI</div>
-            <div class="desc"
-              >一套京东风格的轻量级移动端Vue组库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。</div
-            >
-          </div>
+<template>
+  <div class="content">
+    <nut-switch v-model="checked" size="15px" />
+    <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
+      <div class="container">
+        <nut-avatar
+          size="50"
+          icon="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+        />
+      <div class="right-content">
+        <div class="title">NutUI</div>
+        <div class="desc"
+            >一套京东风格的轻量级移动端Vue组库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。</div
+        >
         </div>
-      </nut-skeleton>
-    </div>
+      </div>
+    </nut-skeleton>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+  setup() {
+    const checked = ref(false);
+    return {
+      checked
+    };
+  }
+};
+</script>
+
+<style lang="scss">
+.content {
+  .nut-switch {
+    display: flex;
+    margin: 0 16px 8px 0;
+  }
+  .container {
+    display: flex;
+    .right-content {
+      margin-left: 19px;
+      font-family: PingFangSC;
+      display: flex;
+      flex-direction: column;
+      .title {
+        font-size: 14px;
+        color: rgba(51, 51, 51, 1);
+      }
+      .desc {
+        margin-top: 10px;
+        font-size: 13px;
+        color: rgba(154, 155, 157, 1);
+      }
+    }
+  }
+}
+</style>
+
 ```
+:::
 
 
 

src/packages/__VUE/tag/doc.md

@@ -23,48 +23,116 @@ app.use(Tag);
 
 ### 基础用法
 
+:::demo
 ```html
- <nut-tag type="primary">标签</nut-tag>
- <nut-tag type="success">标签</nut-tag>
- <nut-tag type="danger">标签</nut-tag>
- <nut-tag type="warning">标签</nut-tag>
-```
-
-### 空心样式
+<template>
+ <nut-cell-group title="基础用法">
+    <nut-cell title="primary 类型">
+      <template v-slot:link>
+        <nut-tag type="primary">标签</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="success 类型">
+      <template v-slot:link>
+        <nut-tag type="success">标签</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="danger 类型">
+      <template v-slot:link>
+        <nut-tag type="danger">标签</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="warning 类型">
+      <template v-slot:link>
+        <nut-tag type="warning">标签</nut-tag>
+      </template>
+    </nut-cell>
+  </nut-cell-group>
+</template>
 
-```html
- <nut-tag plain>标签</nut-tag>
 ```
+:::
 
+### 样式风格 
 
-### 圆角样式
-
+:::demo
 ```html
- <nut-tag round type="primary">标签</nut-tag>
-```
+<template>
+  <nut-cell-group title="样式风格">
+    <nut-cell title="空心样式">
+      <template v-slot:link>
+        <nut-tag plain>标签</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="圆角样式">
+      <template v-slot:link>
+        <nut-tag round type="primary">标签</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="标记样式">
+      <template v-slot:link>
+        <nut-tag mark type="primary">标签</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="可关闭标签">
+      <template v-slot:link>
+        <nut-tag v-if="show" closeable @close="close" type="primary">标签</nut-tag>
+      </template>
+    </nut-cell>
+  </nut-cell-group>
+</template>
+
+
+<script lang="ts">
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const show = ref(true);
+    const close = () => {
+      show.value = false;
+    };
+
+    return {
+      close,
+      show
+    };
+  }
+};
+</script>
 
 
-### 标记样式
 
-```html
- <nut-tag mark type="primary">标签</nut-tag>
 ```
+:::
 
 
-### 可关闭标签
+### 颜色自定义
 
+:::demo
 ```html
- <nut-tag v-if="show" closeable  @close="close" type="primary">标签</nut-tag>
-```
-
+<template>
+  <nut-cell-group title="自定义">
+    <nut-cell title="背景颜色">
+      <template v-slot:link>
+        <nut-tag color="#FA685D">标签</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="文字颜色">
+      <template v-slot:link>
+        <nut-tag color="#E9E9E9" textColor="#999999">标签</nut-tag>
+      </template>
+    </nut-cell>
+    <nut-cell title="空心颜色">
+      <template v-slot:link>
+        <nut-tag color="#FA2400" plain>标签</nut-tag>
+      </template>
+    </nut-cell>
+  </nut-cell-group>
+</template>
 
-### 自定义颜色
-
-```html
- <nut-tag color="#FA685D">标签</nut-tag>
- <nut-tag color="#E9E9E9" text-color="#999999">标签</nut-tag>
- <nut-tag color="#FA2400" plain>标签</nut-tag>
 ```
+:::