fix: 修复navbar和tabbar组件文档格式问题&tabbar demo ts 声明问题 (#1297)

* fix: 修复BackTop demo页面按钮被遮挡样式问题

* fix: 修复navbar和tabbar组件文档格式问题&tabbar demo ts 声明问题

Co-authored-by: xushunfa459 <xushunfa459@hellobike.com>

src/packages/__VUE/navbar/doc.md

@@ -2,7 +2,6 @@
 
 ### 介绍 
 
-
 提供导航功能。
 
 ### 安装
@@ -20,49 +19,47 @@ app.use(Navbar);
 app.use(Icon);
 app.use(Tabs);
 app.use(TabPane);
-
 ```
 
 ### 基本用法
 
 :::demo
 ```html
-  <template>
-    <nut-navbar @on-click-back="back" @on-click-title="title" title="订单详情">
-      <template #left>
-        <div>返回</div>
-      </template>
-      <template #right>
-        <nut-icon class="right" name="share-n"></nut-icon>
-      </template>
-    </nut-navbar>
-
-    <nut-navbar
-      @on-click-back="back"
-      @on-click-title="title"
-      @on-click-right="rightClick"
-      title="浏览记录"
-      desc="清空"
-    ></nut-navbar>
-
-    <nut-navbar
-      :left-show="false"
-      @on-click-back="back"
-      @on-click-title="title"
-      @on-click-icon="icon"
-      @on-click-right="rightClick"
-      title="购物车"
-      titIcon="cart2"
-      desc="编辑"
-    >
-      <template #right>
-        <nut-icon class="right" name="more-x"></nut-icon>
-      </template>
-    </nut-navbar>
-  
-  </template>
-
-  <script lang="ts">
+<template>
+  <nut-navbar @on-click-back="back" @on-click-title="title" title="订单详情">
+    <template #left>
+      <div>返回</div>
+    </template>
+    <template #right>
+      <nut-icon class="right" name="share-n"></nut-icon>
+    </template>
+  </nut-navbar>
+
+  <nut-navbar
+    @on-click-back="back"
+    @on-click-title="title"
+    @on-click-right="rightClick"
+    title="浏览记录"
+    desc="清空"
+  ></nut-navbar>
+
+  <nut-navbar
+    :left-show="false"
+    @on-click-back="back"
+    @on-click-title="title"
+    @on-click-icon="icon"
+    @on-click-right="rightClick"
+    title="购物车"
+    titIcon="cart2"
+    desc="编辑"
+  >
+    <template #right>
+      <nut-icon class="right" name="more-x"></nut-icon>
+    </template>
+  </nut-navbar>
+</template>
+
+<script lang="ts">
   import { ref } from 'vue';
   export default {
   setup() {
@@ -92,45 +89,45 @@ app.use(TabPane);
 
 :::demo
 ```html
-  <template>
-   <nut-navbar
-      @on-click-back="back"
-      @on-click-title="title"
-      @on-click-right="rightClick"
-      desc="编辑"
-    >
-      <template #content>
-        <nut-tabs v-model="tab1value" @click="changeTab">
-          <nut-tabpane title="商品"> </nut-tabpane>
-          <nut-tabpane title="店铺"> </nut-tabpane>
-        </nut-tabs>
-      </template>
-
-      <template #right>
-        <nut-icon class="right" name="more-x"></nut-icon>
-      </template>
-    </nut-navbar>
-  </template>
-
-  <script lang="ts">
-    import { ref } from 'vue';
-    export default {
-    setup() {
-      const tab1value = ref(0);
-      const methods = {
-        back () {
-          alert('header头部， 点击返回');
-        },
-        title () {
-          alert('header头部， 点击title');
-        },
-        rightClick() {
-          alert('右侧点击事件');
-        },
-        changeTab(tab: any) {
-          tab1value.value = tab.paneKey as number;
-        },
-      };
+<template>
+  <nut-navbar
+    @on-click-back="back"
+    @on-click-title="title"
+    @on-click-right="rightClick"
+    desc="编辑"
+  >
+    <template #content>
+      <nut-tabs v-model="tab1value" @click="changeTab">
+        <nut-tabpane title="商品"> </nut-tabpane>
+        <nut-tabpane title="店铺"> </nut-tabpane>
+      </nut-tabs>
+    </template>
+
+    <template #right>
+      <nut-icon class="right" name="more-x"></nut-icon>
+    </template>
+  </nut-navbar>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+  setup() {
+    const tab1value = ref(0);
+    const methods = {
+      back () {
+        alert('header头部， 点击返回');
+      },
+      title () {
+        alert('header头部， 点击title');
+      },
+      rightClick() {
+        alert('右侧点击事件');
+      },
+      changeTab(tab: any) {
+        tab1value.value = tab.paneKey as number;
+      },
+    };
 
     return {
       tab1value,
@@ -139,7 +136,6 @@ app.use(TabPane);
   }
 }
 </script>
-
 ```
 :::
 
@@ -147,44 +143,44 @@ app.use(TabPane);
 
 :::demo
 ```html
-  <template>
-    <nut-navbar @on-click-back="back" >
-      <template #content>
-        <nut-tabs v-model="tab2value" @click="changeTabList">
-          <nut-tabpane title="商品"> </nut-tabpane>
-          <nut-tabpane title="评价"> </nut-tabpane>
-          <nut-tabpane title="详情"> </nut-tabpane>
-          <nut-tabpane title="推荐"> </nut-tabpane>
-        </nut-tabs>
-      </template>
-      <template #icons>
-        <nut-icon class="icon" name="share"></nut-icon>
-      </template>
-
-      <template #right>
-        <nut-icon class="right" name="horizontal-n"></nut-icon>
-      </template>
-    </nut-navbar>
-  </template>
-
-  <script lang="ts">
-    import { ref } from 'vue';
-    export default {
-      setup() {
-      const tab2value = ref(0);
-      const methods = {
-        back() {
-          alert('header头部， 点击返回');
-        },
-        changeTabList(tab: any) {
-          tab2value.value = tab.paneKey as number;
-        }
-      };
-      return {
-        tab2value,
-        ...methods
-      };
-    }
+<template>
+  <nut-navbar @on-click-back="back" >
+    <template #content>
+      <nut-tabs v-model="tab2value" @click="changeTabList">
+        <nut-tabpane title="商品"> </nut-tabpane>
+        <nut-tabpane title="评价"> </nut-tabpane>
+        <nut-tabpane title="详情"> </nut-tabpane>
+        <nut-tabpane title="推荐"> </nut-tabpane>
+      </nut-tabs>
+    </template>
+    <template #icons>
+      <nut-icon class="icon" name="share"></nut-icon>
+    </template>
+
+    <template #right>
+      <nut-icon class="right" name="horizontal-n"></nut-icon>
+    </template>
+  </nut-navbar>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    setup() {
+    const tab2value = ref(0);
+    const methods = {
+      back() {
+        alert('header头部， 点击返回');
+      },
+      changeTabList(tab: any) {
+        tab2value.value = tab.paneKey as number;
+      }
+    };
+    return {
+      tab2value,
+      ...methods
+    };
+  }
 }
 </script>
 

src/packages/__VUE/tabbar/demo.vue

@@ -90,7 +90,7 @@ export default createDemo({
   props: {},
   setup() {
     const active = ref(2);
-    function tabSwitch(item: object, index: number) {
+    function tabSwitch(item: Record<string, unknown>, index: number) {
       console.log(item, index);
     }
     return {

src/packages/__VUE/tabbar/doc.md

@@ -8,14 +8,13 @@
 ``` javascript
 import { createApp } from 'vue';
 //vue
-import { Tabbar,TabbarItem,Icon } from '@nutui/nutui';
+import { Tabbar, TabbarItem, Icon } from '@nutui/nutui';
 //taro
-import { Tabbar,TabbarItem,Icon } from '@nutui/nutui-taro';
+import { Tabbar, TabbarItem, Icon } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Tabbar);
 app.use(TabbarItem);
-
 ```
 
 
@@ -25,13 +24,13 @@ app.use(TabbarItem);
 :::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>
-  <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>
+  <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>
+    <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>
 <script>
   export default{
@@ -44,7 +43,6 @@ app.use(TabbarItem);
       };
     },
   }
-  
 </script>
 ```
 :::
@@ -54,33 +52,33 @@ app.use(TabbarItem);
 :::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>
-      <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>
-      <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>
-    </nut-tabbar>
+  <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>
+    <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>
+    <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>
+  </nut-tabbar>
 </template>
 <script>
   export default{
@@ -93,7 +91,6 @@ app.use(TabbarItem);
       };
     },
   }
-  
 </script>
 ```
 :::
@@ -102,13 +99,13 @@ app.use(TabbarItem);
 :::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>
+  <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>
 ```
 :::
@@ -132,13 +129,13 @@ app.use(TabbarItem);
 :::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>
+  <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>
 ```
 :::

src/packages/__VUE/tabbar/index.vue

@@ -65,6 +65,7 @@ export default create({
         parentData.modelValue = value;
       }
     );
+
     return {
       changeIndex
     };