fix(tab): 修复 switch-tab 事件失效 #635 (#637)

* fix: tab组件兼容taro

* fix: 完善tab文档和样式

* fix: 兼容小程序

* fix: 修改tab监听事件

Co-authored-by: richard1015 <51844712@qq.com>

src/packages/__VUE/tab/demo.vue

@@ -18,7 +18,11 @@
 
     <h2>defaultIndex设置默认显示tab,iconType为half时切换选中icon样式</h2>
     <h2>switchTab监听切换tab返回事件</h2>
-    <nut-tab :default-index="1" @switch-tab="switchTab" icon-type="half">
+    <nut-tab
+      :default-index="defaultIndexs"
+      @switch-tab="switchTab"
+      icon-type="half"
+    >
       <nut-tab-panel tab-title="全部"
         ><p class="content">这里是页签全部内容</p></nut-tab-panel
       >
@@ -160,6 +164,7 @@
 <script lang="ts">
 import { ref, reactive, toRefs } from 'vue';
 import { createComponent } from '../../utils/create';
+import func from './vue-temp/vue-editor-bridge';
 const { createDemo } = createComponent('tab');
 export default createDemo({
   props: {},
@@ -174,16 +179,18 @@ export default createDemo({
         }
       ]
     });
+    const defaultIndexs = ref(1);
     function changeList() {
       resData.editList.push({
         title: '标签' + resData.editList.length
       });
     }
-    function switchTab(activeInddex: number, event: MouseEvent) {
-      console.log(activeInddex, event);
+    function switchTab(activeInddex: number) {
+      console.log(activeInddex);
     }
     return {
       ...toRefs(resData),
+      defaultIndexs,
       changeList,
       switchTab
     };

src/packages/__VUE/tab/doc.md

@@ -19,6 +19,7 @@ app.use(TabPanel);
 app.use(Swiper);
 app.use(SwiperItem);
 
+
 ```
 
 ## 基础样式，默认 tab-title 宽度均分相等
@@ -61,18 +62,16 @@ switchTab 监听切换 tab 返回事件
   >
 </nut-tab>
 <script lang="ts">
-  import { createComponent } from '@/packages/utils/create';
-  const { createDemo } = createComponent('tab');
-  export default createDemo({
+  export default {
     setup() {
-      function switchTab(activeInddex: number, event: MouseEvent) {
-        console.log(activeInddex, event);
+      function switchTab(activeInddex: number) {
+        console.log(activeInddex);
       }
       return {
         switchTab
       };
     }
-  });
+  }
 </script>
 ```
 
@@ -207,9 +206,7 @@ switchTab 监听切换 tab 返回事件
 </div>
 <script lang="ts">
 import { ref , reactive,toRefs } from "vue";
-import { createComponent } from '../../utils/create';
-const { createDemo } = createComponent('tab');
-export default createDemo({
+export default {
   setup() {
     const resData = reactive({
       editList:[
@@ -231,7 +228,7 @@ export default createDemo({
       changeList
     };
   }
-});
+}
 </script>
 ```
 
@@ -258,4 +255,4 @@ export default createDemo({
 
 | 事件名称   | 说明               | 回调参数               |
 | ---------- | ------------------ | ---------------------- |
-| switch-tab | 切换页签时触发事件 | 点击的索引值和触发元素 |
+| switch-tab | 切换页签时触发事件 | 当前活动状态的索引值 |

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

@@ -11,7 +11,7 @@
         class="tab-title-scroll"
         :scroll-with-animation="true"
       >
-        <view :class="['tab-title', randomTitleClass, iconType]">
+        <view :class="['tab-title', randomTitleClass, iconType]" ref="navlist">
           <view
             :class="[
               'tab-title-box',
@@ -95,7 +95,7 @@ export default create({
   components: {
     TabTitle
   },
-  emits: ['switchTab'],
+  emits: ['switch-tab'],
   setup(props, ctx) {
     const titles: Array<DataTitle> = reactive([]);
     const isLock = ref(false);
@@ -162,7 +162,6 @@ export default create({
     function switchTitle(index: number, event) {
       activeIndex.value = index;
       centerTitle(index);
-      ctx.emit('switchTab', index, event);
     }
     function initTitle() {
       titles.length = 0;
@@ -203,6 +202,15 @@ export default create({
         initTitle();
       }
     );
+    watchEffect(() => {
+      activeIndex.value = props.defaultIndex;
+    });
+    watch(
+      () => activeIndex.value,
+      (val, oldVal) => {
+        ctx.emit('switch-tab', activeIndex.value);
+      }
+    );
     return {
       swiperClassName,
       titles,

src/packages/__VUE/tab/index.vue

@@ -89,6 +89,7 @@ export default create({
   components: {
     TabTitle
   },
+  emits: ['switch-tab'],
   setup(props, ctx) {
     const titles: Array<DataTitle> = reactive([]);
     const isLock = ref(false);
@@ -127,7 +128,6 @@ export default create({
       }
     }
     const changeTab = (index: number) => {
-      console.log(index);
       activeIndex.value = index;
       centerTitle(index);
 
@@ -140,6 +140,7 @@ export default create({
       nutuiSwiper.value.to(index);
     }
     function initTitle() {
+      console.log(11);
       titles.length = 0;
       if (ctx.slots.default) {
         const slots: VNode[] =
@@ -171,6 +172,15 @@ export default create({
         initTitle();
       }
     );
+    watchEffect(() => {
+      activeIndex.value = props.defaultIndex;
+    });
+    watch(
+      () => activeIndex.value,
+      (val, oldVal) => {
+        ictx.emit('switch-tab', activeIndex.value);
+      }
+    );
     return {
       swiperClassName,
       titles,

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

@@ -18,7 +18,11 @@
 
     <h2>defaultIndex设置默认显示tab，iconType为half时切换选中icon样式</h2>
     <h2>switchTab监听切换tab返回事件</h2>
-    <nut-tab :default-index="1" @switch-tab="switchTab" icon-type="half">
+    <nut-tab
+      :default-index="currIndex"
+      @switch-tab="switchTab"
+      icon-type="half"
+    >
       <nut-tab-panel tab-title="全部"
         ><p class="content">这里是页签全部内容</p></nut-tab-panel
       >
@@ -155,17 +159,23 @@ export default {
         }
       ]
     });
+    const currIndex = ref(0);
     function changeList() {
       resData.editList.push({
         title: '标签' + resData.editList.length
       });
     }
-    function switchTab(activeInddex: number, event: MouseEvent) {
-      console.log(activeInddex, event);
+    function switchTab(activeInddex: number) {
+      console.log(activeInddex);
+    }
+    function changeIndex() {
+      let aa = currIndex.value;
+      currIndex.value = aa + 1;
     }
     return {
       ...toRefs(resData),
       changeList,
+      currIndex,
       switchTab
     };
   }