feat: 优化tab禁止切换

src/packages/tab/demo.vue

@@ -10,7 +10,7 @@
 
     <h2>defaultIndex设置默认显示tab</h2>
     <h2>switchTab监听切换tab返回事件</h2>
-    <nut-tab :default-index="1" @switchTab="switchTab">
+    <nut-tab :default-index="1" @switch-tab="switchTab">
       <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>
@@ -18,7 +18,15 @@
     </nut-tab>
 
     <h2> animatedTime 开启切换标签内容时的转场动画时间</h2>
-    <nut-tab :animatedTime="500">
+    <nut-tab :animated-time="500">
+      <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>
+
+    <h2> 禁止tab内容滑动</h2>
+    <nut-tab :no-swiping="true">
       <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>
@@ -26,7 +34,7 @@
     </nut-tab>
 
     <h2>标签数量超过 5 个时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中。</h2>
-    <nut-tab :animatedTime="500">
+    <nut-tab :animated-time="500">
       <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>
@@ -49,7 +57,7 @@
     </nut-tab>
 
     <h2>左右tab布局</h2>
-    <nut-tab direction="vertical" :animatedTime="500" :defaultIndex="2">
+    <nut-tab direction="vertical" :animated-time="500" :default-index="2">
       <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>
@@ -60,7 +68,7 @@
     </nut-tab>
 
     <h2>异步操作</h2>
-    <nut-tab :animatedTime="500" v-if="editList.length > 0">
+    <nut-tab :animated-time="500" v-if="editList.length > 0">
       <nut-tab-panel :tab-title="item.title" v-for="(item, index) in editList" :key="index">
         <p class="content">这里是页签{{ index }}内容</p>
       </nut-tab-panel>

src/packages/tab/doc.md

@@ -51,6 +51,18 @@ export default createDemo({
 </nut-tab>
 ```
 
+
+## 禁止tab内容滑动
+
+```html
+<nut-tab :no-swiping="true">
+  <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>
+```
+
 ## 标签数量超过 5 个时，标签栏可以在水平方向上滚动
 切换时会自动将当前标签居中。
 
@@ -141,7 +153,7 @@ export default createDemo({
 | direction | 页签栏的分布，可选值 horizontal/vertical | String | horizontal
 | default-index | 默认选中的页签栏 | Number | 0
 | animated-time | 开启切换标签内容时的转场动画时间 | Number | 0
-
+| no-swiping |禁止tab内容滑动|Boolean|false
 
 
 ### nut-tab-panel

src/packages/tab/index.vue

@@ -13,14 +13,14 @@
       <div class="underline"></div>
     </div>
     <div :class="['nutui-tab-swiper', swiperClassName]">
-      <div class="swiper-wrapper">
+      <div :class="['swiper-wrapper', { 'swiper-no-swiping': noSwiping }]">
         <slot></slot>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts">
-//ts-nochecked
+// @ts-nocheck
 import { PropType, h, toRefs, reactive, computed, ref, onMounted, nextTick, watch, watchEffect } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('tab');
@@ -42,6 +42,10 @@ export default create({
     direction: {
       type: String as PropType<TabDirection>,
       default: 'horizontal'
+    },
+    noSwiping: {
+      type: Boolean,
+      default: false
     }
   },
   components: {
@@ -82,9 +86,10 @@ export default create({
       centerTitle(index);
       mySwiper.slideToLoop(index, props.animatedTime, false);
     }
-    function initSwiper(currIndex) {
+    function initSwiper(currIndex: number) {
       mySwiper = new Swiper('.' + swiperClassName.value, {
         loop: true /** 循环模式选项 */,
+        noSwiping: true,
         observer: true, //修改swiper自己或子元素时，自动初始化swiper
         observeParents: true, //修改swiper的父元素时，自动初始化swiper
         setWrapperSize: true,