docs(actionsheet、card、circleprogress、drag、progress、numberkeyboard、shortpassword、tabbar、toast、): 增加在线调试功能 (#973)

* fix: doc更新

* fix: circleprogress 修改

* fix: tabbar新增底部安全适配属性

* fix: 增加在线文档

* fix: 在线文档接入

src/packages/__VUE/actionsheet/demo.vue

@@ -1,19 +1,11 @@
 <template>
   <div class="demo">
     <h2>基本用法</h2>
-    <nut-cell
-      :show-icon="true"
-      :isLink="true"
-      @click="switchActionSheet('isVisible1')"
-    >
+    <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible1')">
       <span><label>基础用法</label></span>
       <div class="selected-option" v-html="state.val1"></div>
     </nut-cell>
-    <nut-cell
-      :showIcon="true"
-      :isLink="true"
-      @click="switchActionSheet('isVisible2')"
-    >
+    <nut-cell :showIcon="true" :isLink="true" @click="switchActionSheet('isVisible2')">
       <span><label>展示取消按钮</label></span>
       <div class="selected-option" v-html="state.val2"></div>
     </nut-cell>
@@ -25,14 +17,11 @@
 
     <nut-cell :isLink="true" @click="switchActionSheet('isVisible4')">
       <span><label>选项状态</label></span>
+      <div class="selected-option" v-html="state.val4"></div>
     </nut-cell>
 
     <!-- demo 基础用法 -->
-    <nut-actionsheet
-      v-model:visible="state.isVisible1"
-      :menu-items="menuItemsOne"
-      @choose="chooseItem"
-    >
+    <nut-actionsheet v-model:visible="state.isVisible1" :menu-items="menuItemsOne" @choose="chooseItem">
     </nut-actionsheet>
     <!-- demo(带取消按钮） -->
     <nut-actionsheet
@@ -56,6 +45,7 @@
       v-model:visible="state.isVisible4"
       cancel-txt="取消"
       :menu-items="menuItemsThree"
+      @choose="chooseItemFour"
       :choose-tag-value="state.chooseTagValue"
     ></nut-actionsheet>
   </div>
@@ -116,9 +106,7 @@ export default {
         disable: true
       }
     ];
-    const switchActionSheet = (
-      param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4'
-    ) => {
+    const switchActionSheet = (param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4') => {
       state[param] = !state[param];
     };
 
@@ -133,6 +121,9 @@ export default {
     function chooseItemThree(itemParams: Item) {
       state.val3 = itemParams.name;
     }
+    function chooseItemFour(itemParams: Item) {
+      state.val4 = itemParams.name;
+    }
 
     return {
       state,
@@ -142,6 +133,7 @@ export default {
       chooseItem,
       chooseItemTwo,
       chooseItemThree,
+      chooseItemFour,
       switchActionSheet
     };
   }

src/packages/__VUE/actionsheet/doc.md

@@ -20,89 +20,246 @@ app.use(ActionSheet).use(Popup);
 ## 基本用法
 
 默认
+:::demo
 ``` html
-<div @click="switchActionSheet">
-   <span><label>基础用法</label></span>
-   <div class="selected-option" v-html="state.val"></div>
-</div>
-<nut-actionsheet
-  v-model:visible="state.isVisible"
-  :menu-items="menuItems"
-  @choose="chooseItem"
-></nut-actionsheet>
+<template>
+  <div>
+  <nut-cell
+      :show-icon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible')"
+     
+    >
+      <span><label>基础用法</label></span>
+      <div v-html="state.val"></div>
+    </nut-cell>
+     <!-- demo 基础用法 -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible"
+      :menu-items="menuItems"
+      @choose="chooseItem"
+    >
+    </nut-actionsheet>
+    </div>
+</template>
+<script>
+import { reactive } from 'vue';
+export default {
+  setup() {
+  const state = reactive({
+      isVisible: false,
+      val: '',
+    });
+     const menuItems = [
+      {
+        name: '选项一'
+      },
+      {
+        name: '选项二'
+      },
+      {
+        name: '选项三'
+      }
+    ];
+    const switchActionSheet = ( param ) => {
+      state.isVisible = !state.isVisible;
+    };
+      const chooseItem = (itemParams) => {
+      state.val = itemParams.name;
+    };
+    return {
+      state,
+      switchActionSheet,
+      menuItems,
+      chooseItem,
+    };
+  }
+}
+ </script>
 ```
+:::
 
 ## 展示取消按钮
-```html
-<div @click="switchActionSheet">
-  <span><label>展示取消按钮</label></span>
-  <div class="selected-option" v-html="state.val"></div>
-</div>
-<nut-actionsheet v-model:visible="isVisible" 
-  @close="switchActionSheet"
-  :menu-items="menuItems"
-  @choose="chooseItem"
-  cancel-txt="取消"
-></nut-actionsheet>
+:::demo
+``` html
+<template>
+  <div>
+  <nut-cell
+      :show-icon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible')"
+    >
+      <span><label>基础用法</label></span>
+      <div v-html="state.val"></div>
+    </nut-cell>
+     <!-- demo 基础用法 -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible"
+      :menu-items="menuItems"
+      cancel-txt="取消"
+      @choose="chooseItem"
+    >
+    </nut-actionsheet>
+    </div>
+</template>
+<script>
+import { reactive } from 'vue';
+export default {
+  setup() {
+  const state = reactive({
+      isVisible: false,
+      val: '',
+    });
+     const menuItems = [
+      {
+        name: '选项一'
+      },
+      {
+        name: '选项二'
+      },
+      {
+        name: '选项三'
+      }
+    ];
+    const switchActionSheet = ( param ) => {
+      state.isVisible = !state.isVisible;
+    };
+      const chooseItem = (itemParams) => {
+      state.val = itemParams.name;
+    };
+    return {
+      state,
+      switchActionSheet,
+      menuItems,
+      chooseItem,
+    };
+  }
+}
+ </script>
 ```
+:::
 ## 展示描述信息
-```html
-<div @click="switchActionSheet">
-   <span><label>展示取消按钮</label></span>
-    <div class="selected-option" v-html="state.val"></div>
-</div>
- <nut-actionsheet v-model:visible="isVisible" 
-    @close="switchActionSheet"
-    description="state.desc"
-    :menu-items="menuItems"
-    @choose="chooseItem"
-    cancel-txt="取消"
-></nut-actionsheet>
-```
-
-## 选项状态
-```html
-<div @click="switchActionSheet">
-    <span class="title"><label>性别</label></span>
-    <span class="selected-option" v-html="sex"></span>
-</div>
-<nut-actionsheet
-@close="switchActionSheet"
-  v-model:visible="state.isVisible4"
-  cancel-txt="取消"
-  :menu-items="menuItemsThree"
-></nut-actionsheet>
-```
-
-```javascript
-setup() {
-    const state = reactive({
+:::demo
+``` html
+<template>
+  <div>
+  <nut-cell
+      :show-icon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible')"
+    >
+      <span><label>基础用法</label></span>
+      <div v-html="state.val"></div>
+    </nut-cell>
+     <!-- demo 基础用法 -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible"
+      cancel-txt="取消"
+      description="这是一段展示信息"
+      :menu-items="menuItems"
+      @choose="chooseItem"
+    >
+    </nut-actionsheet>
+    </div>
+</template>
+<script>
+import { reactive } from 'vue';
+export default {
+  setup() {
+  const state = reactive({
       isVisible: false,
-      value: '',
-      desc: '这是一段描述信息'
+      val: '',
     });
-    const menuItems = [
+     const menuItems = [
       {
-        name: '选项一',
-        value: 0
+        name: '选项一'
       },
       {
-        name: '选项二',
-        value: 1
+        name: '选项二'
       },
       {
         name: '选项三',
-        value: 2
+        subname: '描述信息'
       }
     ];
-     const switchActionSheet = () => {
-       state.isVisible = !state.isVisible
+    const switchActionSheet = ( param ) => {
+      state.isVisible = !state.isVisible;
+    };
+      const chooseItem = (itemParams) => {
+      state.val = itemParams.name;
     };
-    const chooseItem = (item,index) => {
-      console.log(item,index);
+    return {
+      state,
+      switchActionSheet,
+      menuItems,
+      chooseItem,
     };
+  }
+}
+ </script>
+```
+:::
+
+## 选项状态
 
+:::demo
+``` html
+<template>
+  <div>
+  <nut-cell
+      :show-icon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible')"
+     
+    >
+      <span><label>基础用法</label></span>
+      <div v-html="state.val"></div>
+    </nut-cell>
+     <!-- demo 基础用法 -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible"
+      :menu-items="menuItems"
+      choose-tag-value="着色选项"
+      @choose="chooseItem"
+       cancel-txt="取消"
+    >
+    </nut-actionsheet>
+    </div>
+</template>
+<script>
+import { reactive } from 'vue';
+export default {
+  setup() {
+  const state = reactive({
+      isVisible: false,
+      val: '',
+    });
+     const menuItems = [
+      {
+        name: '着色选项'
+      },
+      {
+        name: '禁用选项',
+        disable: true
+      }
+    ];
+    const switchActionSheet = ( param ) => {
+      state.isVisible = !state.isVisible;
+    };
+      const chooseItem = (itemParams) => {
+      state.val = itemParams.name;
+    };
+    return {
+      state,
+      switchActionSheet,
+      menuItems,
+      chooseItem,
+    };
+  }
+}
+ </script>
 ```
+:::
 
 ## Prop
 

src/packages/__VUE/card/demo.vue

@@ -86,7 +86,7 @@
 </template>
 
 <script lang="ts">
-import { reactive } from '@vue/reactivity';
+import { reactive } from 'vue';
 import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('card');
 

src/packages/__VUE/card/doc.md

@@ -10,9 +10,9 @@
 
 import { createApp } from 'vue';
 // vue
-import { Card } from '@nutui/nutui';
+import { Card,Tag,Price} from '@nutui/nutui';
 // taro
-import { Card } from '@nutui/nutui-taro';
+import { Card ,Tag,Price} from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Card);
@@ -23,22 +23,47 @@ app.use(Card);
 
 ### 基本用法
 
+:::demo
 ```html
+<template>
  <nut-card
-      :img-url="state.imgUrl"
-      :title="state.title"
-      :price="state.price"
-      :vipPrice="state.vipPrice"
-      :shopDesc="state.shopDesc"
-      :delivery="state.delivery"
-      :shopName="state.shopName"
-    >
-    </nut-card>
+  :img-url="state.imgUrl"
+  :title="state.title"
+  :price="state.price"
+  :vipPrice="state.vipPrice"
+  :shopDesc="state.shopDesc"
+  :delivery="state.delivery"
+  :shopName="state.shopName"
+  >
+</nut-card>
+</template>
+<script>
+  import { reactive } from 'vue';
+  export default{
+    setup() {
+    const state = reactive({
+      imgUrl:
+        '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+      title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
+      price: '388',
+      vipPrice: '378',
+      shopDesc: '自营',
+      delivery: '厂商配送',
+      shopName: '阳澄湖大闸蟹自营店>'
+    });
+    return {
+      state
+    };
+  }
+}
+</script>
 ```
+:::
 
 ### 自定义内容
-
+:::demo
 ```html
+<template>
 <nut-card
 :img-url="state.imgUrl"
 :title="state.title"
@@ -66,7 +91,59 @@ app.use(Card);
       <div class="customize">自定义</div>
     </template>
 </nut-card>
+</template>
+<script>
+  import { reactive } from 'vue';
+  export default{
+    setup() {
+    const state = reactive({
+      imgUrl:
+        '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+      title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
+      price: '388',
+      vipPrice: '378',
+      shopDesc: '自营',
+      delivery: '厂商配送',
+      shopName: '阳澄湖大闸蟹自营店>'
+    });
+    return {
+      state
+    };
+  }
+}
+</script>
+<style>
+.search_prolist_attr {
+  margin: 3px 0 1px;
+  height: 15px;
+  overflow: hidden;
+ 
+}
+.search_prolist_attr > span{
+    float: left;
+    padding: 0 5px;
+    border-radius: 1px;
+    font-size: 10px;
+    height: 15px;
+    line-height: 15px;
+    color: #999;
+    background-color: #f2f2f7;
+    margin-right: 5px;
+}
+.tag {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 5px;
+  margin-left: 2px;
+  height: 14px;
+}
+.customize {
+  font-size: 12px;
+}
+</style>
+
 ```
+:::
 ### Prop  
 
 | 字段    | 说明                                       | 类型    | 默认值    |

src/packages/__VUE/circleprogress/doc.md

@@ -20,31 +20,81 @@ app.use(CirecleProgress);
 
 
 ### 基础用法
-
+:::demo
 ```html
-<nut-circleprogress progress="10"></nut-circleprogress>
+<template>
+    <nut-cell>
+    <nut-circleprogress :progress="10"> </nut-circleprogress>
+   </nut-cell>
+</template>
 ```
+:::
 ### 环形进度条自定义样式
-
+:::demo
 ```html
-<nut-circleprogress progress="50" :progress-option="progressOption"></nut-circleprogress>
+<template>
+  <nut-cell>
+    <nut-circleprogress :progress="50" :progress-option="progressOption"> </nut-circleprogress>
+  </nut-cell>
+</template>
+<script>
+import { reactive, ref } from 'vue';
+export default {
+  setup() {
+    const progressOption = reactive({
+      radius: 50,
+      strokeOutWidth: 10,
+      backColor: '#d9d9d9',
+      progressColor: 'red'
+    });
+    return {
+      progressOption,
+    };
+  }
+}
+</script>
 ```
+:::
 ### 环形进度条自定义内容
-
+:::demo
 ```html
- <nut-circleprogress progress="50" :is-auto="true">
-    <div>自定义</div>
- </nut-circleprogress>
+<template>
+  <nut-cell>
+     <nut-circleprogress :progress="50" :is-auto="isAuto">
+       <div>自定义</div>
+    </nut-circleprogress>
+  </nut-cell>
+</template>
+<script>
+import { reactive, ref } from 'vue';
+export default {
+  setup() {
+    const isAuto = ref(true);
+    return {
+      isAuto,
+    };
+  }
+}
+</script>
 ```
+:::
 ### 动态改变环形进度条的进度
-
+:::demo
 ```html
-  <nut-circleprogress :progress="percent" :progress-option="progressOption" :stroke-inner-width="strokeInnerWidth"> </nut-circleprogress>
-  <nut-button type="primary"  @click="setReduceVal" >减少</nut-button>
-  <nut-button type="primary"  @click="setAddVal">增加</nut-button>
-```
-```javascript
- setup() {
+<template>
+  <div>
+    <nut-circleprogress :progress="percent" :progress-option="progressOption" :stroke-inner-width="strokeInnerWidth">
+    </nut-circleprogress>
+  </div>
+  <div>
+    <nut-button type="primary" @click="setReduceVal">减少</nut-button>
+    <nut-button type="primary" @click="setAddVal">增加</nut-button>
+  </div>
+</template>
+<script>
+import { reactive, ref } from 'vue';
+export default {
+  setup() {
     const progressOption = reactive({
       radius: 50,
       strokeOutWidth: 10,
@@ -77,7 +127,10 @@ app.use(CirecleProgress);
       percent
     };
   }
+}
+</script>
 ```
+:::
 
 
 ## Prop

src/packages/__VUE/drag/doc.md

@@ -14,45 +14,79 @@ app.use(Drag);
 ```
 
 ## 基本用法
+:::demo
 ```html
-<nut-drag>
-  <div class="touch-dom">可点击，可拖拽</div>
-</nut-drag>
+<template>
+ <nut-drag>
+      <nut-button type="primary">触摸移动</nut-button>
+  </nut-drag>
+</template>
 ```
+:::
 ## 限制拖拽方向
+:::demo
 ```html
-<nut-drag direction="x">
-  <div class="touch-dom">只能在X轴拖动</div>
-</nut-drag>
+<template>
+  <nut-drag direction="x" :style="{ top: '200px', left: '8px' }">
+      <nut-button type="primary">只能X轴拖拽</nut-button>
+  </nut-drag>
+  </template>
 ```
+:::
 ## 自动吸边
+:::demo
 ```html
-<nut-drag direction="x" :attract="true">
-  <div class="touch-dom">拖动我</div>
-</nut-drag>
+<template>
+  <nut-drag
+      direction="x"
+      :attract="true"
+    >
+      <nut-button type="primary">拖动我</nut-button>
+    </nut-drag>
+    </template>
 ```
+:::
 ## 限制拖拽边界
+:::demo
 ```html
-<nut-drag
-  :boundary="{ top: 401, left: 9, bottom: bottom(), right: right() }"
-  :attract="true"
->
-  <div class="touch-dom">拖动我</div>
-</nut-drag>
+<template>
+ <div class="drag-boundary"></div>
+    <nut-drag
+      :boundary="{ top: 100, left: 9, bottom: bottom(), right: right() }"
+      :style="{ top: '100px', left: '50px' }"
+    >
+      <nut-button type="primary">限制拖拽边界</nut-button>
+    </nut-drag>
+</template>
 <script>
+  export default {
  setup() {
     function right() {
       return document.documentElement.clientWidth - 300 - 9;
     }
     function bottom() {
-      return document.documentElement.clientHeight - 559;
+      return document.documentElement.clientHeight - 300;
     }
     return {
       right,
       bottom
     };
   }
+  }
 </script>
+
+<style>
+.drag-boundary {
+  position: absolute;
+  top: 100px;
+  left: 8px;
+  width: 300px;
+  height: 200px;
+  border: 1px solid red;
+}
+</style>
+:::
+
 ```
 ## Prop
 

src/packages/__VUE/numberkeyboard/doc.md

@@ -21,30 +21,223 @@ app.use(Popup);
 
 
 ### 基础用法 默认键盘
-
+在线调试请将浏览器变为手机模式
+:::demo
 ```html
-<nut-numberkeyboard :visible="true" @input="input" @delete="onDelete" @close="close()"> </nut-numberkeyboard>
+<template>
+    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="默认键盘"></nut-cell>
+    <nut-numberkeyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close"> </nut-numberkeyboard>
+</template>
+<script>
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const visible = ref(false);
+    function showKeyBoard() {
+      visible.value = true;
+    }
+    function input(number) {
+      Toast.text(`输入：${number}`);
+    }
+    function onDelete() {
+      Toast.text('删除');
+    }
+    function close() {
+      visible.value = false;
+    }
+    return {
+      visible,
+      input,
+      showKeyBoard,
+      close,
+      onDelete
+
+    };
+  }
+  }
+</script>
 ```
+:::
 ### 带右侧栏键盘
 
+:::demo
 ```html
-<nut-numberkeyboard type="rightColumn" v-model:visible="visible" :custom-key="customKey1" @input="input" @close="close()"> </nut-numberkeyboard>
+<template>
+    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="带右侧栏键盘"></nut-cell>
+     <nut-numberkeyboard
+      type="rightColumn"
+      v-model:visible="visible"
+      :custom-key="customKey"
+      @input="input"
+      @close="close"
+    >
+    </nut-numberkeyboard>
+</template>
+<script>
+import { ref,reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const visible = ref(false);
+    const customKey = reactive(['.']);
+    function showKeyBoard() {
+      visible.value = true;
+    }
+    function input(number) {
+      Toast.text(`输入：${number}`);
+    }
+    function close() {
+      visible.value = false;
+    }
+    return {
+      visible,
+    customKey,
+      input,
+      showKeyBoard,
+      close,
+     
+
+    };
+  }
+  }
+</script>
 ```
+:::
 ### 随机数键盘
 
+:::demo
 ```html
-<nut-numberkeyboard type="rightColumn" v-model:visible="visible" randomKeys="true" :custom-key="customKey1" @input="input" @close="close(）"> </nut-numberkeyboard>
+<template>
+    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="随机数键盘"></nut-cell>
+    <nut-numberkeyboard
+      type="rightColumn"
+      v-model:visible="visible"
+      :randomKeys="true"
+      :custom-key="customKey"
+      @input="input"
+      @close="close"
+    >
+    </nut-numberkeyboard>
+</template>
+<script>
+import { ref,reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const visible = ref(false);
+    const customKey = reactive(['.']);
+    function showKeyBoard() {
+      visible.value = true;
+    }
+    function input(number) {
+      Toast.text(`输入：${number}`);
+    }
+    function close() {
+      visible.value = false;
+    }
+    return {
+      visible,
+    customKey,
+      input,
+      showKeyBoard,
+      close,
+    };
+  }
+  }
+</script>
 ```
+:::
 ### 带标题栏键盘
 
+:::demo
 ```html
-<nut-numberkeyboard title="默认键盘" v-model:visible="visible" :custom-key="customKey2" @input="input" @close="close()"> </nut-numberkeyboard>
+<template>
+     <nut-cell :isLink="true" @click="showKeyBoard(4)" :showIcon="true" title="带标题栏键盘"></nut-cell>
+    <nut-numberkeyboard
+      title="默认键盘"
+      v-model:visible="visible"
+      :custom-key="customKey"
+      @input="input"
+      @close="close"
+    >
+    </nut-numberkeyboard>
+</template>
+<script>
+import { ref,reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const visible = ref(false);
+    const customKey = reactive(['.']);
+    function showKeyBoard() {
+      visible.value = true;
+    }
+    function input(number) {
+      Toast.text(`输入：${number}`);
+    }
+    function close() {
+      visible.value = false;
+    }
+    return {
+      visible,
+      customKey,
+      input,
+      showKeyBoard,
+      close,
+    };
+  }
+  }
+</script>
 ```
+:::
 
 ### 双向绑定：
 
+:::demo
 ```html
- <nut-numberkeyboard v-model:visible="visible" v-model:value="value" maxlength="6" @close="close()"> </nut-numberkeyboard>
+<template>
+      <nut-cell
+      :isLink="true"
+      desc-text-align="left"
+      @click="showKeyBoard"
+      :desc="value"
+      :showIcon="true"
+      title="双向绑定："
+    ></nut-cell>
+     <nut-numberkeyboard 
+       v-model:visible="visible" 
+       v-model:value="value" 
+       maxlength="6" 
+       @close="close">
+    </nut-numberkeyboard>
+</template>
+<script>
+import { ref,reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const visible = ref(false);
+     const value = ref('');
+    const customKey = reactive(['.']);
+    function showKeyBoard() {
+      visible.value = true;
+    }
+    function close() {
+      visible.value = false;
+    }
+    return {
+      visible,
+      customKey,
+      value,
+      showKeyBoard,
+      close,
+    };
+  }
+  }
+</script>
+```
+:::
 ```
 
 ## Prop

src/packages/__VUE/progress/doc.md

@@ -21,53 +21,106 @@ app.use(Icon);
 
 
 ### 基础用法
-
+:::demo
 ```html
-<nut-progress percentage="30"></nut-progress>
+<template>
+  <nut-cell>
+     <nut-progress percentage="30" />
+  </nut-cell>
+</template>
 ```
+:::
 ### 设置高度和颜色
 
+:::demo
 ```html
-<nut-progress percentage="30" stroke-color="pink" stroke-width="20"></nut-progress>
+<template>
+  <nut-cell>
+    <nut-progress percentage="30" stroke-color=" rgba(250,44,25,0.47)" stroke-width="20" text-color="red" />
+   </nut-cell>
+</template>
 ```
+:::
 ### 设置百分比不显示
-
+:::demo
 ```html
-<nut-progress percentage="50" :show-text="false"></nut-progress>
+<template>
+  <nut-cell>
+     <nut-progress percentage="50" :show-text="false" stroke-height="24" />
+  </nut-cell>
+</template>
 ```
+:::
 ### 设置百分比外显
 
+:::demo
 ```html
-<nut-progress percentage="60" :text-inside="false" stroke-height="24"></nut-progress>
+<template>
+  <nut-cell>
+     <nut-progress percentage="30" />
+  </nut-cell>
+</template>
 ```
+:::
 
 ### 设置百分比内显
-
+:::demo
 ```html
-<nut-progress percentage="60" :text-inside="true" stroke-width="24"></nut-progress>
+<template>
+     <nut-cell>
+        <nut-progress percentage="60" :text-inside="true" />
+      </nut-cell>
+</template>
 ```
+:::
 
 ## 自定义尺寸
 
 内置 **small**，**base**，**large** 三种规格供使用。
+:::demo
 ```html
-<nut-progress size="small" percentage="30" text-inside="true" ></nut-progress>
-<nut-progress size="base" percentage="50" text-inside="true"></nut-progress>
-<nut-progress size="large" percentage="70"  text-inside="true"></nut-progress>
+<template>
+  <nut-cell>
+        <nut-progress percentage="30" :text-inside="true" size="small"> </nut-progress>
+      </nut-cell>
+      <nut-cell>
+        <nut-progress percentage="50" :text-inside="true" size="base"> </nut-progress>
+      </nut-cell>
+      <nut-cell>
+        <nut-progress percentage="70" :text-inside="true" size="large"> </nut-progress>
+      </nut-cell>
+</template>
 ```
+:::
 ### 设置状态显示
-
+:::demo
 ```html
-//动态展示
-<nut-progress 
-   percentage="30" 
-   stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)" 
-   status="active">
-</nut-progress>
-// 展示icon
-<nut-progress percentage="50" stroke-color="#f30" stroke-width="15" ></nut-progress>
-<nut-progress percentage="100" stroke-color="#1890ff" stroke-width="15" status="success"></nut-progress>
+<template>
+   <div>
+      <nut-cell>
+        <nut-progress
+          percentage="30"
+          stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
+          status="active"
+        />
+      </nut-cell>
+      <nut-cell>
+        <nut-progress percentage="50" :stroke-width="strokeWidth" status="icon" />
+      </nut-cell>
+      <nut-cell>
+        <nut-progress
+          percentage="100"
+          stroke-color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
+          stroke-width="15"
+          status="icon"
+          icon-name="issue"
+          icon-color="red"
+        />
+      </nut-cell>
+    </div>
+</template>
 ```
+:::
 
 ## Prop
 

src/packages/__VUE/shortpassword/doc.md

@@ -19,82 +19,252 @@ app.use(Popup);
 ```
 
 
-### 公用片段
-
-``` html
-<nut-shortpassword
-  v-model="state.value"
-  v-model:visible="state.visible"
-  :no-button="state.noButton"
-  :length="state.length"
-  :error-msg="state.errorMsg"
-  @change="methods.onChange"
-  @complete="methods.onComplete"
-  @ok="methods.onOk"
-  @tips="methods.onTips">
-</nut-shortpassword>
-```
-
-``` javascript
-import { reactive, getCurrentInstance } from 'vue';
-setup() {
-  let { proxy } = getCurrentInstance();
-  const state = reactive({
-    visible: false,
-    noButton: true,
-    value: '',
-    errorMsg: '',
-    length: 6
-  });
-  const methods = {
-    onChange(val: string) {
-      val && proxy.$toast.text(val);
-    },
-    onOk(val: string) {
-      val && proxy.$toast.text(val);
-      state.visible = false;
-    },
-    onComplete() {
-      
-    },
-    onTips() {
-      proxy.$toast.text('执行忘记密码逻辑');
-    }
-  };
-  return {
-    state,
-    methods
-  };
-}
-
-```
 ### 基础用法
-
-``` html
+:::demo
+```html
+<template>
 <nut-cell title="基础用法" is-link @click="state.visible = true;"></nut-cell>
+ <nut-shortpassword
+      v-model="state.value"
+      v-model:visible="state.visible"
+      @change="methods.onChange"
+      @close="methods.close"
+      @cancel="methods.cancel"
+    >
+    </nut-shortpassword>
+</template>
+<script>
+import { reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const state = reactive({
+      visible: false,
+      value: '',
+    });
+    const methods = {
+      onChange(val) {
+        val && Toast.text(val);
+      },
+      close() {
+        Toast.text('点击icon关闭弹窗');
+      },
+      cancel() {
+        Toast.text('点击弹层关闭弹窗');
+      }
+    };
+    return {
+      state,
+      methods
+    };
+  }
+  }
+</script>
 ```
+:::
 
 ### 显示按钮组
-
-``` html
-<nut-cell title="显示按钮组" is-link @click="state.visible = true;state.noButton = false;"></nut-cell>
+:::demo
+```html
+<template>
+<nut-cell title="显示按钮组" is-link @click="state.visible = true;"></nut-cell>
+ <nut-shortpassword
+      v-model="state.value"
+      v-model:visible="state.visible"
+      :no-button="false"
+      @change="methods.onChange"
+      @ok="methods.onOk"
+      @close="methods.close"
+      @cancel="methods.cancel"
+    >
+    </nut-shortpassword>
+</template>
+<script>
+import { reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const state = reactive({
+      visible: false,
+      noButton: true,
+      value: '',
+      errorMsg: '',
+      length: 6
+    });
+    const methods = {
+      onChange(val) {
+        val && Toast.text(val);
+      },
+      onOk(val) {
+        val && Toast.text(val);
+        state.visible = false;
+      },
+      close() {
+        Toast.text('点击icon关闭弹窗');
+      },
+      cancel() {
+        Toast.text('关闭弹窗');
+      }
+    };
+    return {
+      state,
+      methods
+    };
+  }
+  }
+</script>
 ```
+:::
 
 ### 自定义密码长度4
 
-``` html
-<nut-cell title="自定义密码长度4" is-link @click="state.visible = true;state.length = 4;"></nut-cell>
+:::demo
+```html
+<template>
+<nut-cell title="显示按钮组" is-link @click="state.visible = true;"></nut-cell>
+ <nut-shortpassword
+      v-model="state.value"
+      v-model:visible="state.visible"
+      :length="state.length"
+      @change="methods.onChange"
+      @close="methods.close"
+      @cancel="methods.cancel"
+    >
+    </nut-shortpassword>
+</template>
+<script>
+import { reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const state = reactive({
+      visible: false,
+      value: '',
+      length: 4
+    });
+    const methods = {
+      onChange(val) {
+        val && Toast.text(val);
+      },
+      onOk(val) {
+        val && Toast.text(val);
+        state.visible = false;
+      },
+      close() {
+        Toast.text('点击icon关闭弹窗');
+      },
+      cancel() {
+        Toast.text('关闭弹窗');
+      }
+    };
+    return {
+      state,
+      methods
+    };
+  }
+  }
+</script>
 ```
+:::
 ### 忘记密码提示语事件回调
 
-``` html
-<nut-cell title="忘记密码提示语事件回调" is-link @click="state.visible = true;"></nut-cell>
+
+:::demo
+```html
+<template>
+<nut-cell title="显示按钮组" is-link @click="state.visible = true;"></nut-cell>
+ <nut-shortpassword
+      v-model="state.value"
+      v-model:visible="state.visible"
+      @change="methods.onChange"
+      @close="methods.close"
+      @tips="methods.onTips"
+      @cancel="methods.cancel"
+    >
+    </nut-shortpassword>
+</template>
+<script>
+import { reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const state = reactive({
+      visible: false,
+      value: '',
+    });
+    const methods = {
+      onChange(val) {
+        val && Toast.text(val);
+      },
+      onTips() {
+        Toast.text('执行忘记密码逻辑');
+      },
+      close() {
+        Toast.text('点击icon关闭弹窗');
+      },
+      cancel() {
+        Toast.text('关闭弹窗');
+      }
+    };
+    return {
+      state,
+      methods
+    };
+  }
+  }
+</script>
 ```
+:::
 
 ### 错误提示语
-``` html
-<nut-cell title="错误提示语" is-link @click="state.visible = true;state.errorMsg = '请输入正确密码';"></nut-cell>
+:::demo
+```html
+<template>
+<nut-cell title="显示按钮组" is-link @click="state.visible = true;"></nut-cell>
+ <nut-shortpassword
+      v-model="state.value"
+      v-model:visible="state.visible"
+      :error-msg="state.errorMsg"
+      @change="methods.onChange"
+      @close="methods.close"
+      @tips="methods.onTips"
+      @cancel="methods.cancel"
+    >
+    </nut-shortpassword>
+</template>
+<script>
+import { reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const state = reactive({
+      visible: false,
+      value: '',
+      errorMsg: '请输入正确密码',
+    });
+    const methods = {
+      onChange(val) {
+        val && Toast.text(val);
+      },
+      onTips() {
+        Toast.text('执行忘记密码逻辑');
+      },
+      close() {
+        Toast.text('点击icon关闭弹窗');
+      },
+      cancel() {
+        Toast.text('关闭弹窗');
+      }
+    };
+    return {
+      state,
+      methods
+    };
+  }
+  }
+</script>
 ```
+:::
 
 ### Prop
 
@@ -118,7 +288,7 @@ setup() {
 |----------|------------------------|----------|
 | change   | 输入密码时触发事件     |  当前输入框值value    |
 | ok       | 点击确实时触发事件     | 当前输入框值value    |
-| cancel   | 点击取消时触发事件     | -    |
+| cancel   | 点击弹层或取消时触发事件     | -    |
 | close    | 点击关闭图标时触发事件 | -    |
 | complete | 输入完成的回调         | 当前输入框值value    |
 

src/packages/__VUE/tabbar/doc.md

@@ -20,8 +20,11 @@ app.use(TabbarItem);
 
 
 ### 基础用法
+如果需要在现有 Icon 的基础上使用更多图标，请参考icon组件自定义图标引入。
 
-``` html
+:::demo
+```html
+<template>
 <nut-tabbar @tab-switch="tabSwitch">
   <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
   <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
@@ -29,138 +32,147 @@ app.use(TabbarItem);
   <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
   <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
 </nut-tabbar>
-```
-
-``` javascript
-setup() {
-  function tabSwitch(item: object, index: number) {
-    console.log(item, index);
+</template>
+<script>
+  export default{
+    setup() {
+      function tabSwitch(item, index) {
+        console.log(item, index);
+      }
+      return {
+        tabSwitch,
+      };
+    },
   }
-  return {
-    tabSwitch,
-  };
-},
+  
+</script>
 ```
+:::
 
-### 路由跳转
-
-``` html
-<nut-tabbar @tab-switch="tabSwitch">
-  <nut-tabbar-item tab-title="首页" icon="home" to="/home"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="分类" icon="category" :to="{ path: '/home', query: { plan: 'private' }}"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
-</nut-tabbar>
-```
 
 ### 自定义图片链接
+:::demo
 ```html
+<template>
 <nut-tabbar @tab-switch="tabSwitch">
-  <nut-tabbar-item tab-title="首页"
-          img= 'http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg'
-           activeImg='http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg'
+      <nut-tabbar-item
+        tab-title="首页"
+        img="http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg"
+        activeImg="http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg"
       ></nut-tabbar-item>
-  <nut-tabbar-item tab-title="分类" 
-          img="http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
-          activeImg='http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg'
+      <nut-tabbar-item
+        tab-title="分类"
+        img="http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
+        activeImg="http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg"
       ></nut-tabbar-item>
-  <nut-tabbar-item tab-title="发现" 
-          img="http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
-          activeImg='http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg'
+      <nut-tabbar-item
+        tab-title="发现"
+        img="http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
+        activeImg="http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg"
       ></nut-tabbar-item>
-  <nut-tabbar-item tab-title="购物车" 
-         img="http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
-         activeImg='http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg'
+      <nut-tabbar-item
+        tab-title="购物车"
+        img="http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
+        activeImg="http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg"
       ></nut-tabbar-item>
-  <nut-tabbar-item tab-title="我的" 
-         img="http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
-         activeImg='http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg'
+      <nut-tabbar-item
+        tab-title="我的"
+        img="http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
+        activeImg="http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg"
       ></nut-tabbar-item>
-</nut-tabbar>
+    </nut-tabbar>
+</template>
+<script>
+  export default{
+    setup() {
+      function tabSwitch(item, index) {
+        console.log(item, index);
+      }
+      return {
+        tabSwitch,
+      };
+    },
+  }
+  
+</script>
 ```
+:::
 
 ### 自定义选中
-
-``` html
-<nut-tabbar v-model:visible="active">
-  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
-</nut-tabbar>
-```
-``` javascript
-setup() {
-  const active = ref(2)
-  return {
-    active
-  };
-},
+:::demo
+```html
+<template>
+<nut-tabbar v-model:visible="active" size="18px">
+      <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+    </nut-tabbar>
+</template>
 ```
+:::
 ### 徽标提示
-
-``` html
-<nut-tabbar>
-  <nut-tabbar-item tab-title="首页" icon="home" num="11"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="购物车" icon="cart" num="110"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
-</nut-tabbar>
+:::demo
+```html
+<template>
+  <nut-tabbar>
+    <nut-tabbar-item tab-title="首页" icon="home" num="11"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="购物车" icon="cart" num="110"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+  </nut-tabbar>
+</template>
 ```
+:::
 ### 自定义颜色
 
-``` html
-<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
-  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
-</nut-tabbar>
-```
 
-### 自定义Icon
-如果需要在现有 Icon 的基础上使用更多图标，请参考icon组件自定义图标引入。
-``` html
-<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
-  <nut-tabbar-item tab-title="首页" font-class-name="iconfont" class-prefix="icon" icon="home"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="分类" font-class-name="iconfont" class-prefix="icon"  icon="category"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="发现" font-class-name="iconfont" class-prefix="icon"  icon="find"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="购物车" font-class-name="iconfont" class-prefix="icon"  icon="cart"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="我的" font-class-name="iconfont" class-prefix="icon" icon="my"></nut-tabbar-item>
-</nut-tabbar>
+:::demo
+```html
+<template>
+ <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
+      <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+    </nut-tabbar>
+</template>
 ```
+:::
+
 ### 三个图标的标签栏
 
-``` html
-<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
-  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-</nut-tabbar>
+
+:::demo
+```html
+<template>
+  <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
+    <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+  </nut-tabbar>
+</template>
 ```
+:::
 ### 固定底部，可自由跳转
 
-``` html
-<nut-tabbar :bottom="true">
-  <nut-tabbar-item tab-title="首页" href="" icon="home"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-  <nut-tabbar-item
-    tab-title="购物车"
-    href="https://m.jd.com"
-    icon="cart"
-  ></nut-tabbar-item>
-  <nut-tabbar-item
-    tab-title="我的"
-    href="######"
-    icon="my"
-  ></nut-tabbar-item>
-</nut-tabbar>
+
+:::demo
+```html
+<template>
+  <nut-tabbar :bottom="true" :safeAreaInsetBottom="true">
+    <nut-tabbar-item tab-title="首页" href="" icon="home"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="购物车" href="https://m.jd.com" icon="cart"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="我的" href="######" icon="my"></nut-tabbar-item>
+  </nut-tabbar>
+</template>
 ```
+:::
 ### Prop
 
 ### nut-tabbar

src/packages/__VUE/toast/doc.md

@@ -17,80 +17,233 @@ app.use(Toast);
 ## 代码演示
 
 #### 全局使用方式
-``` javascript
+:::demo
+``` html
+<template>
+</template>
+<script>
 import { getCurrentInstance } from 'vue';
-
 export default {
   setup() {
-    const { proxy } = getCurrentInstance();
+   const { proxy } = getCurrentInstance();
     proxy.$toast.text('全局使用方式');
     return {};
-  },
-};
+  }
+}
+</script>
 ```
+:::
 
 #### 文字提示
-``` javascript
+:::demo
+```html
+<template>
+  <nut-cell title="Text 文字提示" is-link @click="textToast('网络失败，请稍后再试~')"></nut-cell>
+</template>
+<script>
 import { Toast } from '@nutui/nutui';
-
 export default {
   setup() {
-    Toast.text('网络失败，请稍后再试~');
-    return {};
-  },
-};
+     const textToast = (msg) => {
+      Toast.text(msg);
+    };
+    return {
+      textToast,
+    };
+  }
+}
+</script>
 ```
+:::
 #### 标题提示
 
-``` javascript
-Toast.text(msg,{title:'标题文字' });
+:::demo
+```html
+<template>
+  <nut-cell title="Toast 标题展示" is-link @click="textToast('网络失败，请稍后再试~')"></nut-cell>
+</template>
+<script>
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+     const textToast = (msg) => {
+      Toast.text(msg, {
+        title: '标题文字'
+      });
+    };
+    return {
+      textToast,
+    };
+  }
+}
+</script>
 ```
+:::
 #### 成功提示
 
-``` javascript
-Toast.success('成功提示');
+:::demo
+```html
+<template>
+  <nut-cell title="Toast 成功提示" is-link @click="textToast('成功提示')"></nut-cell>
+</template>
+<script>
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+     const textToast = (msg) => {
+       Toast.success(msg);
+    };
+    return {
+      textToast,
+    };
+  }
+}
+</script>
 ```
+:::
 
 #### 失败提示
 
-``` javascript
-Toast.fail('失败提示');
+:::demo
+```html
+<template>
+  <nut-cell title="Toast 失败提示" is-link @click="textToast('失败提示')"></nut-cell>
+</template>
+<script>
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+     const textToast = (msg) => {
+      Toast.fail(msg);
+    };
+    return {
+      textToast,
+    };
+  }
+}
+</script>
 ```
+:::
 
 #### 警告提示
 
-``` javascript
-Toast.warn('警告提示');
+:::demo
+```html
+<template>
+  <nut-cell title="Toast 警告提示" is-link @click="textToast('警告提示')"></nut-cell>
+</template>
+<script>
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+     const textToast = (msg) => {
+      Toast.warn(msg);
+    };
+    return {
+      textToast,
+    };
+  }
+}
+</script>
 ```
+:::
 
 #### 加载提示
 
-``` javascript
-Toast.loading('加载中');
+:::demo
+```html
+<template>
+  <nut-cell title="Toast 加载提示" is-link @click="textToast('加载中')"></nut-cell>
+</template>
+<script>
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+     const textToast = (msg) => {
+      Toast.loading(msg);
+    };
+    return {
+      textToast,
+    };
+  }
+}
+</script>
 ```
+:::
 
 #### Toast不消失
 
-``` javascript
-Toast.text(msg,{
-    duration:0
-});
+:::demo
+```html
+<template>
+  <nut-cell title="Toast不消失" is-link @click="textToast('Toast不消失')"></nut-cell>
+</template>
+<script>
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+     const textToast = (msg) => {
+     Toast.text(msg, {
+        duration: 0
+      });
+    };
+    return {
+      textToast,
+    };
+  }
+}
+</script>
 ```
+:::
 #### Toast自定义底部高度
 
-``` javascript
-Toast.text(msg, {
-    center: false,
-    bottom: '10%'
-});
+:::demo
+```html
+<template>
+  <nut-cell title="Toast 自定义底部高度" is-link @click="textToast('自定义距离')"></nut-cell>
+</template>
+<script>
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+     const textToast = (msg) => {
+      Toast.text(msg, {
+        center: false,
+        bottom: '10%'
+      });
+    };
+    return {
+      textToast,
+    };
+  }
+}
+</script>
 ```
+:::
 
 #### Loading带透明罩
-``` javascript
-Toast.loading(msg,{
-     cover:true
-});
+:::demo
+```html
+<template>
+  <nut-cell title="Loading带透明罩" is-link @click="textToast('加载中')"></nut-cell>
+</template>
+<script>
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+     const textToast = (msg) => {
+       Toast.loading(msg, {
+        cover: true
+      });
+    };
+    return {
+      textToast,
+    };
+  }
+}
+</script>
 ```
+:::
 
 
 ####  支持在JS模块中导入使用