chore(navbar): 底层tabs组件替换 (#971)

* fix: tag/badge/popover组件提交

* fix: tag/popover/badge组件优化

* fix: popover/badge组件review修改

* fix: popover组件review修改

* fix: badge/popover组件代码优化

* fix: badge组件代码修改

* fix: 修改popover组件slots文档参数名称

* fix: popover 组件文档修改

* fix: popover组件优化

* fix: popover H5样式修改

* fix: popover关闭点击优化

* upd: 骨架屏组件

* fix: 骨架屏组件代码逻辑合并

* fix: navbar组件底层tabs组件替换

* fix: navbar 中间内容自定义

* fix: demo 文案修改

* fix: navbar 接入在线调试

src/packages/__VUE/navbar/demo.vue

@@ -27,20 +27,8 @@
       icon="more-x"
     ></nut-navbar>
 
-    <h2>增加tab及右侧按钮</h2>
+    <h2>自定义导航栏中间内容</h2>
     <nut-navbar
-      tab
-      :tabs="[
-        {
-          id: '11',
-          name: '商品'
-        },
-        {
-          id: '22',
-          name: '店铺'
-        }
-      ]"
-      @switch-tab="switchTab"
       @on-click-back="back"
       @on-click-title="title"
       @on-click-clear="edit"
@@ -48,116 +36,79 @@
       desc="编辑"
       icon="horizontal-n"
     >
+      <template #content>
+        <nut-tabs v-model="tab1value" @click="changeTab">
+          <nut-tabpane title="商品"> </nut-tabpane>
+          <nut-tabpane title="店铺"> </nut-tabpane>
+        </nut-tabs>
+      </template>
     </nut-navbar>
 
     <h2>多tab切换导航</h2>
-    <nut-navbar
-      :tabs="tabList"
-      @switch-tab="switchTab"
-      @on-click-back="back"
-      icon="more-x"
-      @on-click-send="send"
-    >
+    <nut-navbar @on-click-back="back" @on-click-send="list" icon="more-x">
+      <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"
-          @on-click-slot-send="morelist"
-        ></nut-icon>
+        <nut-icon class="icon" name="share" @on-click-slot-send="morelist"></nut-icon>
       </template>
     </nut-navbar>
   </div>
 </template>
 
 <script lang="ts">
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('navbar');
 export default createDemo({
   setup(props, { emit }) {
-    const tabList = [
-      {
-        id: '11',
-        name: '商品'
+    const tab1value = ref(0);
+    const tab2value = ref(0);
+    const methods = {
+      back() {
+        alert('header头部， 点击返回');
+      },
+      title() {
+        alert('header头部， 点击title');
+      },
+      icon() {
+        alert('icon');
+      },
+      send() {
+        alert('发送');
       },
-      {
-        id: '22',
-        name: '评价'
+      edit() {
+        alert('编辑');
       },
-      {
-        id: '33',
-        name: '详情'
+      more() {
+        alert('更多');
       },
-      {
-        id: '44',
-        name: '推荐'
+      clear() {
+        alert('清空');
       },
-      {
-        id: '55',
-        name: '商品'
+      list() {
+        alert('列表');
       },
-      {
-        id: '66',
-        name: '评价'
+      morelist() {
+        alert('多个更多');
       },
-      {
-        id: '77',
-        name: '详情'
+      changeTab(tab: any) {
+        tab1value.value = tab.paneKey as number;
       },
-      {
-        id: '88',
-        name: '推荐'
+      changeTabList(tab: any) {
+        tab2value.value = tab.paneKey as number;
       }
-    ];
-    const back = () => {
-      alert('header头部， 点击返回');
-    };
-    const title = () => {
-      alert('header头部， 点击title');
-    };
-    const right = () => {
-      alert('header头部， 点击右侧按钮');
-    };
-    const icon = () => {
-      alert('icon');
-    };
-    const send = () => {
-      alert('发送');
-    };
-    const edit = () => {
-      alert('编辑');
-    };
-    const more = () => {
-      alert('更多');
-    };
-    const clear = () => {
-      alert('清空');
-    };
-    const list = () => {
-      alert('列表');
-    };
-    const morelist = () => {
-      alert('多个更多');
     };
-    function switchTab(id: number, name: string) {
-      console.log(id, name);
-    }
 
     return {
-      back,
-      title,
-      right,
-      send,
-      edit,
-      clear,
-      more,
-      list,
-      icon,
-      morelist,
-      switchTab,
-      ...reactive({
-        tabList
-      })
+      tab1value,
+      tab2value,
+      ...methods
     };
   }
 });

src/packages/__VUE/navbar/doc.md

@@ -11,57 +11,195 @@
 
 import { createApp } from 'vue';
 // vue
-import { Navbar,Icon } from '@nutui/nutui';
+import { Navbar,Icon,Tabs, TabPane } from '@nutui/nutui';
 // taro
-import { Navbar,Icon } from '@nutui/nutui-taro';
+import { Navbar,Icon,Tabs, TabPane } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Navbar);
 app.use(Icon);
+app.use(Tabs);
+app.use(TabPane);
 
 ```
 
 #
 ### 基本用法
 
+:::demo
 ```html
-  <nut-navbar  @on-click-back="back" @on-click-title="title" @on-click-send="send" title="订单详情" icon="share"></nut-navbar>
-  <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-clear="clear"  title="浏览记录" desc="清空"></nut-navbar>
-  <nut-navbar :left-show="false" @on-click-title="title" @on-click-icon="icon" @on-click-clear="edit"  @on-click-send="more" title="购物车" titIcon="locationg3" desc="编辑" icon="more"></nut-navbar>
+  <template>
+<nut-navbar
+      @on-click-back="back"
+      @on-click-title="title"
+      @on-click-send="send"
+      title="订单详情"
+      icon="share-n"
+    ></nut-navbar>
+    <nut-navbar
+      @on-click-back="back"
+      @on-click-title="title"
+      @on-click-clear="clear"
+      title="浏览记录"
+      desc="清空"
+    ></nut-navbar>
+    <nut-navbar
+      :left-show="false"
+      @on-click-title="title"
+      @on-click-icon="icon"
+      @on-click-clear="edit"
+      @on-click-send="more"
+      title="购物车"
+      titIcon="cart2"
+      desc="编辑"
+      icon="more-x"
+    ></nut-navbar>
+  
+  </template>
+
+  <script lang="ts">
+  import { ref } from 'vue';
+  export default {
+  setup() {
+    const methods = {
+      back() {
+        alert('header头部， 点击返回');
+      },
+      title() {
+        alert('header头部， 点击title');
+      },
+      icon() {
+        alert('icon');
+      },
+      send() {
+        alert('发送');
+      },
+      edit() {
+        alert('编辑');
+      },
+      more() {
+        alert('更多');
+      },
+      clear() {
+        alert('清空');
+      },
+    };
+
+    return {
+      ...methods,
+    };
+  }
+}
+</script>
 
 ```
+:::
 
-### 设置slot:tabs可以增加tab
+### 设置slot:content可以自定义导航栏中间内容
 
+:::demo
 ```html
-    <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-clear="edit" @on-click-send="list" desc="编辑" icon="horizontal">
-      <template v-slot:tabs>
-        <nut-tab>
-          <nut-tab-panel tab-title="商品"><p class="content">这里是页签全部内容</p></nut-tab-panel>
-          <nut-tab-panel tab-title="店铺"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
-        </nut-tab>
+<template>
+ <nut-navbar
+      @on-click-back="back"
+      @on-click-title="title"
+      @on-click-clear="edit"
+      @on-click-send="list"
+      desc="编辑"
+      icon="horizontal-n"
+    >
+      <template #content>
+        <nut-tabs v-model="tab1value" @click="changeTab">
+          <nut-tabpane title="商品"> </nut-tabpane>
+          <nut-tabpane title="店铺"> </nut-tabpane>
+        </nut-tabs>
       </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');
+        },
+        edit () {
+          alert('编辑');
+        },
+        list () {
+          alert('列表');
+        },
+        changeTab(tab: any) {
+          tab1value.value = tab.paneKey as number;
+        },
+      };
+
+    return {
+      tab1value,
+      ...methods
+    };
+  }
+}
+</script>
+
 ```
+:::
 
 ### 多tab切换导航及增加右侧按钮
 
+:::demo
 ```html
-    <nut-navbar @on-click-back="back" icon="share" @on-click-send="send">
-      <template v-slot:tabs>
-        <nut-tab>
-          <nut-tab-panel tab-title="商品"><p class="content">这里是页签全部内容</p></nut-tab-panel>
-          <nut-tab-panel tab-title="评价"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
-          <nut-tab-panel tab-title="详情"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
-          <nut-tab-panel tab-title="推荐"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
-        </nut-tab>
+<template>
+   <nut-navbar @on-click-back="back" @on-click-send="list" icon="more-x">
+      <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="more" @on-click-slot-send="morelist"></nut-icon>
+      <template #icons>
+        <nut-icon class="icon" name="share" @on-click-slot-send="morelist"></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头部， 点击返回');
+        },
+        list() {
+          alert('列表');
+        },
+        morelist () {
+          alert('多个更多');
+        },
+        changeTabList(tab: any) {
+          tab2value.value = tab.paneKey as number;
+        }
+      };
+      return {
+        tab2value,
+        ...methods
+      };
+    }
+}
+</script>
+
 ```
+:::
 
 ### Prop  
 
@@ -78,4 +216,10 @@ app.use(Icon);
 |-------|----------|-------------|
 | title | 点击页面标题事件 | event:Event |
 | right | 点击右侧按钮事件 | event:Event |
-| back | 点击返回上一页事件 | event:Event |
+| back | 点击返回上一页事件 | event:Event |
+
+### Slot
+| 名称  | 说明     | 回调参数    |
+|-------|----------|-------------|
+| icons | 增加右侧图标 |  |
+| content |  自定义导航栏中间内容 |  |

src/packages/__VUE/navbar/index.scss

@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   height: 44px;
+  box-sizing: border-box;
   padding: 13px 16px;
   background: $white;
   box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
@@ -54,40 +55,12 @@
       display: inline-block;
     }
 
-    .tab-title {
-      width: 164px;
-      white-space: nowrap;
-      overflow-x: auto;
-      display: flex;
-      .tab-title-box {
-        height: 50px;
-        display: flex;
-        flex: 1;
-        justify-content: center;
-        align-items: center;
-        box-sizing: border-box;
-        text-align: center;
-        font-size: 14px;
-        color: rgba(26, 26, 26, 1);
-        margin-left: 10px;
-      }
-      .nut-tab-active {
-        color: #1a1a1a;
-        font-weight: bold;
-        font-size: 16px;
-        position: relative;
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: 7px;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 12px;
-          height: 4px;
-          background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/127200/40/18747/536/5fb36b5aE61cac2d8/638032e8da9b93f4.png');
-          background-size: 100% 100%;
-        }
-      }
+    .nut-tabs__titles {
+      background: $white;
+    }
+
+    .nut-tabpane {
+      display: none;
     }
   }
 

src/packages/__VUE/navbar/index.taro.vue

@@ -1,60 +1,22 @@
 <template>
   <view :class="classes">
     <view class="nut-navbar__left">
-      <nut-icon
-        v-if="leftShow"
-        color="#979797"
-        name="left"
-        @click="handleLeft"
-      ></nut-icon>
+      <nut-icon v-if="leftShow" color="#979797" name="left" @click="handleLeft"></nut-icon>
     </view>
-    <view
-      class="nut-navbar__title"
-      :class="{ icon }"
-      v-if="title || titIcon || tabs"
-    >
-      <view v-if="title" class="text__title" @click="handleCenter">{{
-        title
-      }}</view>
-      <nut-icon
-        v-if="titIcon"
-        class="icon"
-        :name="titIcon"
-        @click="handleCenterIcon"
-      ></nut-icon>
-      <view class="tab-title">
-        <view
-          :class="[
-            'tab-title-box',
-            { 'nut-tab-active': activeIndex == item.id || activeIndex == index }
-          ]"
-          @click="switchTitle(item.id, item.name)"
-          v-for="(item, index) in tabs"
-          :key="item.id"
-        >
-          {{ item.name }}
-        </view>
-      </view>
+    <view class="nut-navbar__title" :class="{ icon }">
+      <view v-if="title" class="text__title" @click="handleCenter">{{ title }}</view>
+      <nut-icon v-if="titIcon" class="icon" :name="titIcon" @click="handleCenterIcon"></nut-icon>
+      <slot name="content"></slot>
     </view>
     <view class="nut-navbar__right" :class="{ icon }" v-if="desc || icon">
-      <view
-        v-if="desc"
-        :style="{ 'text-align': descTextAlign }"
-        @click="handleClear"
-        >{{ desc }}</view
-      >
+      <view v-if="desc" :style="{ 'text-align': descTextAlign }" @click="handleClear">{{ desc }}</view>
       <template v-if="icon">
         <view @click="handleSends">
           <slot name="icons"></slot>
         </view>
       </template>
       <view>
-        <nut-icon
-          v-if="icon"
-          class="rightIcon"
-          :name="icon"
-          @click="handleSend"
-        ></nut-icon>
+        <nut-icon v-if="icon" class="rightIcon" :name="icon" @click="handleSend"></nut-icon>
       </view>
     </view>
   </view>
@@ -69,15 +31,8 @@ export default create({
     leftShow: { type: Boolean, default: true }, //左侧  是否显示返回
     title: { type: String, default: '' }, //中间  文字标题
     titIcon: { type: String, default: '' }, //中间  标题icon
-    tabs: {
-      type: Array,
-      defaul: () => {
-        return [];
-      }
-    },
     icon: { type: String, default: '' }, //右侧   按钮图标
     desc: { type: String, default: '' }, //右侧   按钮文字
-
     defaultIndex: {
       type: Number,
       default: 0

src/packages/__VUE/navbar/index.vue

@@ -1,58 +1,22 @@
 <template>
   <view :class="classes">
     <view class="nut-navbar__left">
-      <nut-icon
-        v-if="leftShow"
-        color="#979797"
-        name="left"
-        @click="handleLeft"
-      ></nut-icon>
+      <nut-icon v-if="leftShow" color="#979797" name="left" @click="handleLeft"></nut-icon>
     </view>
-    <view
-      class="nut-navbar__title"
-      :class="{ icon }"
-      v-if="title || titIcon || tabs"
-    >
+    <view class="nut-navbar__title" :class="{ icon }">
       <view v-if="title" @click="handleCenter">{{ title }}</view>
-      <nut-icon
-        v-if="titIcon"
-        class="icon"
-        :name="titIcon"
-        @click="handleCenterIcon"
-      ></nut-icon>
-      <view class="tab-title">
-        <view
-          :class="[
-            'tab-title-box',
-            { 'nut-tab-active': activeIndex == item.id || activeIndex == index }
-          ]"
-          @click="switchTitle(item.id, item.name)"
-          v-for="(item, index) in tabs"
-          :key="item.id"
-        >
-          {{ item.name }}
-        </view>
-      </view>
+      <nut-icon v-if="titIcon" class="icon" :name="titIcon" @click="handleCenterIcon"></nut-icon>
+      <slot name="content"></slot>
     </view>
     <view class="nut-navbar__right" :class="{ icon }" v-if="desc || icon">
-      <view
-        v-if="desc"
-        :style="{ 'text-align': descTextAlign }"
-        @click="handleClear"
-        >{{ desc }}</view
-      >
+      <view v-if="desc" :style="{ 'text-align': descTextAlign }" @click="handleClear">{{ desc }}</view>
       <template v-if="icon">
         <view @click="handleSends">
           <slot name="icons"></slot>
         </view>
       </template>
       <view>
-        <nut-icon
-          v-if="icon"
-          class="rightIcon"
-          :name="icon"
-          @click="handleSend"
-        ></nut-icon>
+        <nut-icon v-if="icon" class="rightIcon" :name="icon" @click="handleSend"></nut-icon>
       </view>
     </view>
   </view>
@@ -67,15 +31,8 @@ export default create({
     leftShow: { type: Boolean, default: true }, //左侧  是否显示返回
     title: { type: String, default: '' }, //中间  文字标题
     titIcon: { type: String, default: '' }, //中间  标题icon
-    tabs: {
-      type: Array,
-      defaul: () => {
-        return [];
-      }
-    },
     icon: { type: String, default: '' }, //右侧   按钮图标
     desc: { type: String, default: '' }, //右侧   按钮文字
-
     defaultIndex: {
       type: Number,
       default: 0
@@ -104,12 +61,6 @@ export default create({
       };
     });
 
-    function switchTitle(id: number, name: string) {
-      activeIndex.value = id;
-      console.log(id);
-      emit('switch-tab', activeIndex.value, name);
-    }
-
     function handleLeft() {
       emit('on-click-back');
     }
@@ -150,7 +101,6 @@ export default create({
       handleSend,
       handleSlot,
       handleSends,
-      switchTitle,
       activeIndex
     };
   }

src/sites/mobile-taro/vue/src/nav/pages/navbar/index.vue

@@ -7,16 +7,14 @@
       @on-click-send="send"
       title="订单详情"
       icon="share-n"
-    >
-    </nut-navbar>
+    ></nut-navbar>
     <nut-navbar
       @on-click-back="back"
       @on-click-title="title"
       @on-click-clear="clear"
       title="浏览记录"
       desc="清空"
-    >
-    </nut-navbar>
+    ></nut-navbar>
     <nut-navbar
       :left-show="false"
       @on-click-title="title"
@@ -29,20 +27,8 @@
       icon="more-x"
     ></nut-navbar>
 
-    <h2>增加tab及右侧按钮</h2>
+    <h2>自定义导航栏中间内容</h2>
     <nut-navbar
-      tab
-      :tabs="[
-        {
-          id: '11',
-          name: '商品'
-        },
-        {
-          id: '22',
-          name: '店铺'
-        }
-      ]"
-      @switch-tab="switchTab"
       @on-click-back="back"
       @on-click-title="title"
       @on-click-clear="edit"
@@ -50,114 +36,77 @@
       desc="编辑"
       icon="horizontal-n"
     >
+      <template #content>
+        <nut-tabs v-model="tab1value" @click="changeTab">
+          <nut-tabpane title="商品"> </nut-tabpane>
+          <nut-tabpane title="店铺"> </nut-tabpane>
+        </nut-tabs>
+      </template>
     </nut-navbar>
 
     <h2>多tab切换导航</h2>
-    <nut-navbar
-      :tabs="tabList"
-      @switch-tab="switchTab"
-      @on-click-back="back"
-      icon="more-x"
-      @on-click-send="send"
-    >
+    <nut-navbar @on-click-back="back" @on-click-send="list" icon="more-x">
+      <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"
-          @on-click-slot-send="morelist"
-        ></nut-icon>
+        <nut-icon class="icon" name="share" @on-click-slot-send="morelist"></nut-icon>
       </template>
     </nut-navbar>
   </div>
 </template>
 
 <script lang="ts">
-import { reactive, defineComponent } from 'vue';
+import { ref, defineComponent } from 'vue';
 export default defineComponent({
   setup(props, { emit }) {
-    const tabList = [
-      {
-        id: '11',
-        name: '商品'
+    const tab1value = ref(0);
+    const tab2value = ref(0);
+    const methods = {
+      back() {
+        alert('header头部， 点击返回');
       },
-      {
-        id: '22',
-        name: '评价'
+      title() {
+        alert('header头部， 点击title');
       },
-      {
-        id: '33',
-        name: '详情'
+      icon() {
+        alert('icon');
       },
-      {
-        id: '44',
-        name: '推荐'
+      send() {
+        alert('发送');
       },
-      {
-        id: '55',
-        name: '商品'
+      edit() {
+        alert('编辑');
       },
-      {
-        id: '66',
-        name: '评价'
+      more() {
+        alert('更多');
       },
-      {
-        id: '77',
-        name: '详情'
+      clear() {
+        alert('清空');
       },
-      {
-        id: '88',
-        name: '推荐'
+      list() {
+        alert('列表');
+      },
+      morelist() {
+        alert('多个更多');
+      },
+      changeTab(tab: any) {
+        tab1value.value = tab.paneKey as number;
+      },
+      changeTabList(tab: any) {
+        tab2value.value = tab.paneKey as number;
       }
-    ];
-    const back = () => {
-      console.log('header头部， 点击返回');
-    };
-    const title = () => {
-      console.log('header头部， 点击title');
-    };
-    const right = () => {
-      console.log('header头部， 点击右侧按钮');
-    };
-    const icon = () => {
-      console.log('icon');
-    };
-    const send = () => {
-      console.log('发送');
-    };
-    const edit = () => {
-      console.log('编辑');
-    };
-    const more = () => {
-      console.log('更多');
-    };
-    const clear = () => {
-      console.log('清空');
-    };
-    const list = () => {
-      console.log('列表');
-    };
-    const morelist = () => {
-      console.log('多个更多');
     };
-    function switchTab(id: number, name: string) {
-      console.log(id, name);
-    }
 
     return {
-      back,
-      title,
-      right,
-      send,
-      edit,
-      clear,
-      more,
-      list,
-      icon,
-      morelist,
-      switchTab,
-      ...reactive({
-        tabList
-      })
+      tab1value,
+      tab2value,
+      ...methods
     };
   }
 });