fix: 在线文档接入

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/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模块中导入使用