Repository: Tencent/tdesign-mobile-vue
Pull request #996 (2023-07-27 06:56:05)

fix(Swiper): resolved change event parameter error
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [x] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- fix(Swiper): 修复 `change` 事件参数错误

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] Changelog 已提供或无须提供


github-actions[bot]: **Size Change:** +105 B (0%) 

**Total Size:** 388 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 204 kB | +65 B (0%) |
| `./dist/tdesign.min.js` | 118 kB | +40 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 37.5 kB |
| `./dist/tdesign.min.css` | 27.2 kB |

</details>


github-actions[bot]: <a href="https://preview-pr996-tdesign-mobile-vue.surge.sh"><img height="96" alt="完成" src="https://user-images.githubusercontent.com/15634204/150816437-9f5bb788-cd67-4cbc-9897-b82d74e9aa65.png" /></a>
<!-- [工作流地址](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/5677553215) -->
<!-- AUTO_PREVIEW_HOOK -->

Patch:
diff --git a/site/web/app.vue b/site/web/app.vue
index 73ce82c8..4c7d16f4 100644
--- a/site/web/app.vue
+++ b/site/web/app.vue
@@ -13,7 +13,7 @@
 
 <script>
 import siteConfig from '../docs.config';
-import { sortDocs, filterVersions } from './utils';
+import { sortDocs } from './utils';
 import { defineComponent } from 'vue';
 import packageJson from '../../package.json';
 
@@ -78,9 +78,7 @@ export default defineComponent({
         .then((res) => res.json())
         .then((res) => {
           const options = [];
-          const versions = filterVersions(Object.keys(res.versions).filter((v) => !v.includes('alpha')));
-
-          versions.forEach((v) => {
+          Object.keys(res.versions).forEach((v) => {
             const nums = v.split('.');
             if (nums[0] === '0' && nums[1] < 7) return false;
 
diff --git a/src/swiper/demos/base.vue b/src/swiper/demos/base.vue
index 2015c916..c544a343 100644
--- a/src/swiper/demos/base.vue
+++ b/src/swiper/demos/base.vue
@@ -17,8 +17,8 @@ const swiperList = [
   `${imageCdn}/swiper1.png`,
 ];
 
-const handleChange = (index: number) => {
-  console.log('基础示例,页数变化到》》》', index);
+const handleChange = (index: number, context: any) => {
+  console.log('基础示例,页数变化到》》》', index, context);
 };
 </script>
 
diff --git a/src/swiper/demos/card.vue b/src/swiper/demos/card.vue
index 0c9f7d79..ff622bd9 100644
--- a/src/swiper/demos/card.vue
+++ b/src/swiper/demos/card.vue
@@ -22,8 +22,8 @@ const swiperList = [
   `${imageCdn}/swiper1.png`,
 ];
 
-const handleChange = (index: number) => {
-  console.log('基础示例,页数变化到》》》', index);
+const handleChange = (index: number, context: any) => {
+  console.log('基础示例,页数变化到》》》', index, context);
 };
 </script>
 
diff --git a/src/swiper/demos/control.vue b/src/swiper/demos/control.vue
index cd1b2372..f9b7228e 100644
--- a/src/swiper/demos/control.vue
+++ b/src/swiper/demos/control.vue
@@ -6,7 +6,7 @@
       height="192"
       @change="handleChange"
     >
-      <t-swiper-item v-for="(item, index) in swiperList" :key="index">
+      <t-swiper-item v-for="(item, index) in swiperList" :key="index" style="height: 192px">
         <img :src="item" class="img" />
       </t-swiper-item>
     </t-swiper>
@@ -22,7 +22,7 @@ const swiperList = [
   `${imageCdn}/swiper1.png`,
 ];
 
-const handleChange = (index: number) => {
-  console.log('基础示例,页数变化到》》》', index);
+const handleChange = (index: number, context: any) => {
+  console.log('基础示例,页数变化到》》》', index, context);
 };
 </script>
diff --git a/src/swiper/demos/custom.vue b/src/swiper/demos/custom.vue
index 3e6ff3dd..33a2c6b1 100644
--- a/src/swiper/demos/custom.vue
+++ b/src/swiper/demos/custom.vue
@@ -17,7 +17,7 @@ const swiperList = [
   `${imageCdn}/swiper1.png`,
 ];
 
-const handleChange = (index: number) => {
-  console.log('基础示例,页数变化到》》》', index);
+const handleChange = (index: number, context: any) => {
+  console.log('基础示例,页数变化到》》》', index, context);
 };
 </script>
diff --git a/src/swiper/demos/fraction.vue b/src/swiper/demos/fraction.vue
index 580ae441..61c67a78 100644
--- a/src/swiper/demos/fraction.vue
+++ b/src/swiper/demos/fraction.vue
@@ -21,7 +21,7 @@ const swiperList = [
   `${imageCdn}/swiper1.png`,
 ];
 
-const handleChange = (index: number) => {
-  console.log('基础示例,页数变化到》》》', index);
+const handleChange = (index: number, context: any) => {
+  console.log('基础示例,页数变化到》》》', index, context);
 };
 </script>
diff --git a/src/swiper/demos/vertical.vue b/src/swiper/demos/vertical.vue
index 40ae4bcb..e5180f35 100644
--- a/src/swiper/demos/vertical.vue
+++ b/src/swiper/demos/vertical.vue
@@ -23,7 +23,7 @@ const swiperList = [
   `${imageCdn}/swiper2.png`,
   `${imageCdn}/swiper1.png`,
 ];
-const handleChange = (index: number) => {
-  console.log('change: ', index);
+const handleChange = (index: number, context: any) => {
+  console.log('基础示例,页数变化到》》》', index, context);
 };
 </script>
diff --git a/src/swiper/swiper.en-US.md b/src/swiper/swiper.en-US.md
index 8b62fa02..76ca15a8 100644
--- a/src/swiper/swiper.en-US.md
+++ b/src/swiper/swiper.en-US.md
@@ -17,14 +17,14 @@ navigation | Object / Slot / Function | - | Typescript：`SwiperNavigation \| TN
 nextMargin | String / Number | 0 | \- | N
 previousMargin | String / Number | 0 | \- | N
 type | String | default | options：default/card | N
-onChange | Function |  | Typescript：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| ''`<br/> | N
+onChange | Function |  | Typescript：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/> | N
 onClick | Function |  | Typescript：`(index: number) => void`<br/> | N
 
 ### Swiper Events
 
 name | params | description
 -- | -- | --
-change | `(current: number, context: { source: SwiperChangeSource })` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| ''`<br/>
+change | `(current: number, context: { source: SwiperChangeSource })` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource =  'autoplay' \| 'touch' \| 'nav'`<br/>
 click | `(index: number)` | \-
 
 ### SwiperNavigation
diff --git a/src/swiper/swiper.md b/src/swiper/swiper.md
index 93fb0bc9..4eb73d59 100644
--- a/src/swiper/swiper.md
+++ b/src/swiper/swiper.md
@@ -16,14 +16,14 @@ loop | Boolean | true | 是否循环播放 | N
 navigation | Object / Slot / Function | - | 导航器全部配置。TS 类型：`SwiperNavigation \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 nextMargin | String / Number | 0 | 【开发中】后边距，可用于露出后一项的一小部分。默认单位 `px` | N
 previousMargin | String / Number | 0 | 【开发中】前边距，可用于露出前一项的一小部分。默认单位 `px` | N
-onChange | Function |  | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| ''`<br/> | N
+onChange | Function |  | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/> | N
 onClick | Function |  | TS 类型：`(index: number) => void`<br/>点击轮播项时触发 | N
 
 ### Swiper Events
 
 名称 | 参数 | 描述
 -- | -- | --
-change | `(current: number, context: { source: SwiperChangeSource })` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| ''`<br/>
+change | `(current: number, context: { source: SwiperChangeSource })` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
 click | `(index: number)` | 点击轮播项时触发
 
 ### SwiperNavigation
diff --git a/src/swiper/swiper.vue b/src/swiper/swiper.vue
index bd9577f4..249fbe57 100644
--- a/src/swiper/swiper.vue
+++ b/src/swiper/swiper.vue
@@ -17,8 +17,8 @@
     <!-- 导航器 -->
     <template v-if="navigation && enableNavigation">
       <span v-if="!isVertical && 'showControls' in navigation && navigation.showControls" :class="`${navName}__btn`">
-        <span :class="`${navName}__btn--prev`" @click="goPrev()" />
-        <span :class="`${navName}__btn--next`" @click="goNext()" />
+        <span :class="`${navName}__btn--prev`" @click="goPrev('nav')" />
+        <span :class="`${navName}__btn--next`" @click="goNext('nav')" />
       </span>
       <span
         v-if="'type' in navigation"
@@ -58,6 +58,7 @@ import isNumber from 'lodash/isNumber';
 
 import config from '../config';
 import SwiperProps from './props';
+import { SwiperChangeSource } from './type';
 import { renderTNode, TNode, useVModel } from '../shared';
 import { preventDefault } from '../shared/dom';
 
@@ -82,12 +83,7 @@ const items = ref<any>([]);
 const props = defineProps(SwiperProps);
 const emit = defineEmits(['change', 'update:current', 'update:modelValue']);
 
-const [current, setCurrent] = useVModel(
-  ref(props.current),
-  ref(props.modelValue),
-  props.defaultCurrent,
-  props.onChange,
-);
+const [current, setCurrent] = useVModel(ref(props.current), ref(props.modelValue), props.defaultCurrent);
 const swiperContainer = ref<HTMLElement | null>(null);
 const computedNavigation = computed(() => (isObject(props.navigation) ? '' : renderTNode(self, 'navigation')));
 
@@ -115,9 +111,9 @@ const onItemClick = () => {
   props.onClick?.(current.value ?? 0);
 };
 
-const move = (step: number) => {
+const move = (step: number, source: SwiperChangeSource) => {
   animating.value = true;
-  processIndex((current.value as number) + step);
+  processIndex((current.value as number) + step, source);
 
   const moveDirection = !isVertical.value ? 'X' : 'Y';
   const distance = root.value?.[isVertical.value ? 'offsetHeight' : 'offsetWidth'] ?? 0;
@@ -143,20 +139,20 @@ const startAutoplay = () => {
   if (typeof props.current === 'number') return false;
   if (!props?.autoplay || autoplayTimer !== null) return false; // stop repeat autoplay
   autoplayTimer = setInterval(() => {
-    goNext();
+    goNext('autoplay');
   }, props?.interval);
 };
 
-const goPrev = () => {
+const goPrev = (source: SwiperChangeSource) => {
   disabled.value = true;
-  move(-1);
+  move(-1, source);
 };
-const goNext = () => {
+const goNext = (source: SwiperChangeSource) => {
   disabled.value = true;
-  move(1);
+  move(1, source);
 };
 
-const processIndex = (index: number) => {
+const processIndex = (index: number, source: SwiperChangeSource) => {
   const max = items.value.length;
   let val = index;
 
@@ -168,6 +164,7 @@ const processIndex = (index: number) => {
   }
 
   setCurrent(val);
+  props.onChange?.(val, { source });
 };
 
 const { lengthX, lengthY } = useSwipe(swiperContainer, {
@@ -205,11 +202,11 @@ const onTouchEnd = () => {
   const distanceY = lengthY.value;
 
   if ((!isVertical.value && distanceX < -100) || (isVertical.value && distanceY < -100)) {
-    move(-1);
+    move(-1, 'touch');
   } else if ((!isVertical.value && distanceX > 100) || (isVertical.value && distanceY > 100)) {
-    move(1);
+    move(1, 'touch');
   } else {
-    move(current.value as number);
+    move(current.value as number, 'touch');
   }
   startAutoplay();
 };
diff --git a/src/swiper/type.ts b/src/swiper/type.ts
index 5338c10e..53727e44 100644
--- a/src/swiper/type.ts
+++ b/src/swiper/type.ts
@@ -112,6 +112,6 @@ export interface SwiperNavigation {
   type?: SwiperNavigationType;
 }
 
-export type SwiperChangeSource = 'autoplay' | 'touch' | '';
+export type SwiperChangeSource = 'autoplay' | 'touch' | 'nav';
 
 export type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction';
diff --git a/src/tag/tag.vue b/src/tag/tag.vue
index 64ae1b18..7bb56f89 100644
--- a/src/tag/tag.vue
+++ b/src/tag/tag.vue
@@ -6,7 +6,7 @@
     <span :class="`${baseClass}__text`">
       <t-node :content="tagContent"></t-node>
     </span>
-    <span v-if="closable && !disabled" :class="`${baseClass}__icon-close`" @click.stop="onClickClose">
+    <span v-if="closable" :class="`${baseClass}__icon-close`" @click.stop="onClickClose">
       <close-icon />
     </span>
   </span>
@@ -56,9 +56,6 @@ const Tag = defineComponent({
 
     const onClickClose = (e: MouseEvent): void => {
       if (!props.disabled) {
-        console.log(1);
-        console.log(props.onClose);
-
         props.onClose?.({ e });
       }
     };
diff --git a/src/upload/upload.vue b/src/upload/upload.vue
index e1e826cb..5e8816e4 100644
--- a/src/upload/upload.vue
+++ b/src/upload/upload.vue
@@ -230,7 +230,7 @@ export default defineComponent({
           status: 'waiting',
         };
         // node 环境不支持 URL.createObjectURL, 保证测试用例通过
-        if (!(typeof process !== 'undefined' && process.release.name === 'node')) {
+        if (!(typeof process !== 'undefined' && process.release?.name === 'node')) {
           uploadFile.url = URL.createObjectURL(fileRaw);
           if (!props.autoUpload) {
             images.value.push(uploadFile.url as string);


Test patch:
diff --git a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
index 53abab2a..8154a502 100644
--- a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
@@ -82,6 +82,7 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
             class="t-icon t-icon-close"
             fill="none"
             height="1em"
+            style="font-size: 24px;"
             viewBox="0 0 16 16"
             width="1em"
           >
@@ -312,6 +313,7 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
             class="t-icon t-icon-close"
             fill="none"
             height="1em"
+            style="font-size: 24px;"
             viewBox="0 0 16 16"
             width="1em"
           >
@@ -542,6 +544,7 @@ exports[`Cascader > Cascader lazyVue demo works fine 1`] = `
             class="t-icon t-icon-close"
             fill="none"
             height="1em"
+            style="font-size: 24px;"
             viewBox="0 0 16 16"
             width="1em"
           >
@@ -769,6 +772,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
                 class="t-icon t-icon-close"
                 fill="none"
                 height="1em"
+                style="font-size: 24px;"
                 viewBox="0 0 16 16"
                 width="1em"
               >
@@ -1012,6 +1016,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
                 class="t-icon t-icon-close"
                 fill="none"
                 height="1em"
+                style="font-size: 24px;"
                 viewBox="0 0 16 16"
                 width="1em"
               >
@@ -1229,6 +1234,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
                 class="t-icon t-icon-close"
                 fill="none"
                 height="1em"
+                style="font-size: 24px;"
                 viewBox="0 0 16 16"
                 width="1em"
               >
@@ -1472,6 +1478,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
                 class="t-icon t-icon-close"
                 fill="none"
                 height="1em"
+                style="font-size: 24px;"
                 viewBox="0 0 16 16"
                 width="1em"
               >
@@ -1715,6 +1722,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
                 class="t-icon t-icon-close"
                 fill="none"
                 height="1em"
+                style="font-size: 24px;"
                 viewBox="0 0 16 16"
                 width="1em"
               >
@@ -1962,6 +1970,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
                 class="t-icon t-icon-close"
                 fill="none"
                 height="1em"
+                style="font-size: 24px;"
                 viewBox="0 0 16 16"
                 width="1em"
               >
@@ -2161,6 +2170,7 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
             class="t-icon t-icon-close"
             fill="none"
             height="1em"
+            style="font-size: 24px;"
             viewBox="0 0 16 16"
             width="1em"
           >
@@ -2361,6 +2371,7 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
             class="t-icon t-icon-close"
             fill="none"
             height="1em"
+            style="font-size: 24px;"
             viewBox="0 0 16 16"
             width="1em"
           >
@@ -2595,6 +2606,7 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
             class="t-icon t-icon-close"
             fill="none"
             height="1em"
+            style="font-size: 24px;"
             viewBox="0 0 16 16"
             width="1em"
           >
diff --git a/src/cascader/__test__/__snapshots__/index.test.jsx.snap b/src/cascader/__test__/__snapshots__/index.test.jsx.snap
index 7de0dc2d..f0315cba 100644
--- a/src/cascader/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/cascader/__test__/__snapshots__/index.test.jsx.snap
@@ -33,6 +33,7 @@ exports[`cascader > events > : pick 1`] = `
           class="t-icon t-icon-close"
           fill="none"
           height="1em"
+          style="font-size: 24px;"
           viewBox="0 0 16 16"
           width="1em"
         >
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
index d95ab641..e8fd89c2 100644
--- a/src/form/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -859,6 +859,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                     class="t-icon t-icon-close"
                     fill="none"
                     height="1em"
+                    style="font-size: 24px;"
                     viewBox="0 0 16 16"
                     width="1em"
                   >
@@ -2610,6 +2611,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                           class="t-icon t-icon-close"
                           fill="none"
                           height="1em"
+                          style="font-size: 24px;"
                           viewBox="0 0 16 16"
                           width="1em"
                         >
@@ -4221,6 +4223,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                     class="t-icon t-icon-close"
                     fill="none"
                     height="1em"
+                    style="font-size: 24px;"
                     viewBox="0 0 16 16"
                     width="1em"
                   >
diff --git a/src/swiper/__test__/__snapshots__/demo.test.jsx.snap b/src/swiper/__test__/__snapshots__/demo.test.jsx.snap
index 11d69d21..23d741b8 100644
--- a/src/swiper/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/swiper/__test__/__snapshots__/demo.test.jsx.snap
@@ -183,7 +183,7 @@ exports[`Swiper > Swiper controlVue demo works fine 1`] = `
       
       <div
         class="t-swiper-item"
-        style=""
+        style="height: 192px;"
       >
         
         <img
@@ -194,7 +194,7 @@ exports[`Swiper > Swiper controlVue demo works fine 1`] = `
       </div>
       <div
         class="t-swiper-item"
-        style=""
+        style="height: 192px;"
       >
         
         <img
@@ -205,7 +205,7 @@ exports[`Swiper > Swiper controlVue demo works fine 1`] = `
       </div>
       <div
         class="t-swiper-item"
-        style=""
+        style="height: 192px;"
       >
         
         <img
@@ -216,7 +216,7 @@ exports[`Swiper > Swiper controlVue demo works fine 1`] = `
       </div>
       <div
         class="t-swiper-item"
-        style=""
+        style="height: 192px;"
       >
         
         <img
@@ -227,7 +227,7 @@ exports[`Swiper > Swiper controlVue demo works fine 1`] = `
       </div>
       <div
         class="t-swiper-item"
-        style=""
+        style="height: 192px;"
       >
         
         <img
@@ -789,7 +789,7 @@ exports[`Swiper > Swiper mobileVue demo works fine 1`] = `
             
             <div
               class="t-swiper-item"
-              style=""
+              style="height: 192px;"
             >
               
               <img
@@ -800,7 +800,7 @@ exports[`Swiper > Swiper mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-swiper-item"
-              style=""
+              style="height: 192px;"
             >
               
               <img
@@ -811,7 +811,7 @@ exports[`Swiper > Swiper mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-swiper-item"
-              style=""
+              style="height: 192px;"
             >
               
               <img
@@ -822,7 +822,7 @@ exports[`Swiper > Swiper mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-swiper-item"
-              style=""
+              style="height: 192px;"
             >
               
               <img
@@ -833,7 +833,7 @@ exports[`Swiper > Swiper mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-swiper-item"
-              style=""
+              style="height: 192px;"
             >
               
               <img
diff --git a/src/swiper/__test__/index.test.jsx b/src/swiper/__test__/index.test.jsx
index d87f901c..91b4a1a0 100644
--- a/src/swiper/__test__/index.test.jsx
+++ b/src/swiper/__test__/index.test.jsx
@@ -25,72 +25,72 @@ const list = [
 ];
 
 describe('swiper', () => {
-    // it('duration && paginationPosition', async () => {
-    //   const current = ref(1);
-    //   const duration = 100;
-    //   const interval = 100;
-    //   const navigation = {
-    //     type: 'dots',
-    //     showSlideBtn: false,
-    //   };
-    //   const paginationPosition = 'top';
-    //   const onChange = vi.fn();
-    //   const wrapper = mount({
-    //     setup() {
-    //       return () => (
-    //         <Swiper
-    //           v-model={current.value}
-    //           interval={interval}
-    //           duration={duration}
-    //           navigation={navigation}
-    //           paginationPosition={paginationPosition}
-    //           onChange={onChange}
-    //         >
-    //           {{
-    //             default: list.map((item, index) => {
-    //               return (
-    //                 <SwiperItem>
-    //                   {{
-    //                     default: () => {
-    //                       return <img src={item.image} />;
-    //                     },
-    //                   }}
-    //                 </SwiperItem>
-    //               );
-    //             }),
-    //           }}
-    //         </Swiper>
-    //       );
-    //     },
-    //   });
-    //   await sleep(interval + duration);
-    //   const $swiper = wrapper.find(`.${classPrefix}`);
-    //   const $swiperContainer = wrapper.find(`.${classPrefix}__container`);
+  // it('duration && paginationPosition', async () => {
+  //   const current = ref(1);
+  //   const duration = 100;
+  //   const interval = 100;
+  //   const navigation = {
+  //     type: 'dots',
+  //     showSlideBtn: false,
+  //   };
+  //   const paginationPosition = 'top';
+  //   const onChange = vi.fn();
+  //   const wrapper = mount({
+  //     setup() {
+  //       return () => (
+  //         <Swiper
+  //           v-model={current.value}
+  //           interval={interval}
+  //           duration={duration}
+  //           navigation={navigation}
+  //           paginationPosition={paginationPosition}
+  //           onChange={onChange}
+  //         >
+  //           {{
+  //             default: list.map((item, index) => {
+  //               return (
+  //                 <SwiperItem>
+  //                   {{
+  //                     default: () => {
+  //                       return <img src={item.image} />;
+  //                     },
+  //                   }}
+  //                 </SwiperItem>
+  //               );
+  //             }),
+  //           }}
+  //         </Swiper>
+  //       );
+  //     },
+  //   });
+  //   await sleep(interval + duration);
+  //   const $swiper = wrapper.find(`.${classPrefix}`);
+  //   const $swiperContainer = wrapper.find(`.${classPrefix}__container`);
 
-    //   // 模拟触发 transitionend
-    //   $swiperContainer.trigger(`transitionend`);
+  //   // 模拟触发 transitionend
+  //   $swiperContainer.trigger(`transitionend`);
 
-    //   // duration = 100
-    //   expect($swiperContainer.attributes('style').includes(`transform ${duration}ms;`));
+  //   // duration = 100
+  //   expect($swiperContainer.attributes('style').includes(`transform ${duration}ms;`));
 
-    //   // swiper 会复制首项和末项， 所有 swiper-item 个数是 list.length + 2
-    //   const $swiperItems = wrapper.findAll(`.${classPrefix}-item`);
-    //   expect($swiperItems).toHaveLength(list.length + 2);
+  //   // swiper 会复制首项和末项， 所有 swiper-item 个数是 list.length + 2
+  //   const $swiperItems = wrapper.findAll(`.${classPrefix}-item`);
+  //   expect($swiperItems).toHaveLength(list.length + 2);
 
-    //   // 导航器
-    //   const $pagination = wrapper.find(`.${classPrefix}__pagination`);
-    //   expect(
-    //     $pagination
-    //       .attributes('class')
-    //       .includes(`t-swiper__pagination-${navigation.type} t-swiper__pagination-${paginationPosition}`),
-    //   );
+  //   // 导航器
+  //   const $pagination = wrapper.find(`.${classPrefix}__pagination`);
+  //   expect(
+  //     $pagination
+  //       .attributes('class')
+  //       .includes(`t-swiper__pagination-${navigation.type} t-swiper__pagination-${paginationPosition}`),
+  //   );
 
-    //   // 导航器 dot
-    //   const $dots = wrapper.findAll(`.${classPrefix}-dot`);
-    //   expect($dots).toHaveLength(list.length);
-    //   // 初始化时，current 项为激活态
-    //   expect($dots[current.value].attributes('class').includes(`t-swiper-dot--active`)).toBeTruthy();
-    // });
+  //   // 导航器 dot
+  //   const $dots = wrapper.findAll(`.${classPrefix}-dot`);
+  //   expect($dots).toHaveLength(list.length);
+  //   // 初始化时，current 项为激活态
+  //   expect($dots[current.value].attributes('class').includes(`t-swiper-dot--active`)).toBeTruthy();
+  // });
   it('height & direction', async () => {
     const current = ref(1);
     const height = 200;
@@ -114,13 +114,11 @@ describe('swiper', () => {
             direction={direction}
             onChange={onChange}
           >
-            {
-              list.map((item) => (
-                <SwiperItem>
-                    <img src={item.image} />
-                </SwiperItem>
-              ))
-            }
+            {list.map((item) => (
+              <SwiperItem>
+                <img src={item.image} />
+              </SwiperItem>
+            ))}
           </Swiper>
         );
       },
@@ -166,13 +164,11 @@ describe('swiper', () => {
             navigation={navigation}
             onChange={onChange}
           >
-            {
-              list.map((item) => (
-                <SwiperItem>
-                    <img src={item.image} />
-                </SwiperItem>
-              ))
-            }
+            {list.map((item) => (
+              <SwiperItem>
+                <img src={item.image} />
+              </SwiperItem>
+            ))}
           </Swiper>
         );
       },
@@ -183,8 +179,8 @@ describe('swiper', () => {
     const $btnNext = wrapper.find(`.${classPrefix}-nav__btn--next`);
     $btnNext.trigger('click');
     await sleep(200);
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith(2);
+    expect(onChange).toHaveBeenCalledTimes(1, { source: 'nav' });
+    expect(onChange).toHaveBeenCalledWith(2, { source: 'nav' });
   });
 
   it('@event', async () => {
@@ -203,24 +199,22 @@ describe('swiper', () => {
             direction={direction.value}
             onChange={onChange}
           >
-            {
-              list.map((item) => (
-                <SwiperItem>
-                    <img src={item.image} />
-                </SwiperItem>
-              ))
-            }
+            {list.map((item) => (
+              <SwiperItem>
+                <img src={item.image} />
+              </SwiperItem>
+            ))}
           </Swiper>
         );
       },
     });
-    const $container = wrapper.find('.t-swiper__container')
-    
-    await $container.trigger('touchstart', { touches: [{ clientX: 0, clientY: 0 }] })
-    await $container.trigger('touchmove', { touches: [{ clientX: 101, clientY: 0 }] })
-    await $container.trigger('touchend', { touches: [{ clientX: 200, clientY: 0 }] })
-    await sleep(200)
-    expect(onChange).toBeCalledWith(0);
+    const $container = wrapper.find('.t-swiper__container');
+
+    await $container.trigger('touchstart', { touches: [{ clientX: 0, clientY: 0 }] });
+    await $container.trigger('touchmove', { touches: [{ clientX: 101, clientY: 0 }] });
+    await $container.trigger('touchend', { touches: [{ clientX: 200, clientY: 0 }] });
+    await sleep(200);
+    expect(onChange).toBeCalledWith(0, { source: 'touch' });
     // direction.value = 'vertical';
     // await sleep(1000)
     // await $container.trigger('touchstart', { touches: [{ clientX: 0, clientY: 0 }] })
@@ -228,7 +222,7 @@ describe('swiper', () => {
     // await $container.trigger('touchend', { touches: [{ clientX: 0, clientY: 200 }] })
     // await sleep(500)
     // expect(onChange).toBeCalledWith(2);
-  })
+  });
 
   it(':remove', async () => {
     const items = ref(list);
@@ -236,13 +230,11 @@ describe('swiper', () => {
       setup() {
         return () => (
           <Swiper>
-            {
-              items.value.map((item) => (
-                <SwiperItem>
-                    <img src={item.image} />
-                </SwiperItem>
-              ))
-            }
+            {items.value.map((item) => (
+              <SwiperItem>
+                <img src={item.image} />
+              </SwiperItem>
+            ))}
           </Swiper>
         );
       },
@@ -250,7 +242,7 @@ describe('swiper', () => {
 
     items.value.splice(0, 1);
     expect(items.value.length).toBe(2);
-  })
+  });
 });
 
 describe('navigation', () => {
@@ -274,13 +266,11 @@ describe('navigation', () => {
             navigation={navigation}
             onChange={onChange}
           >
-            {
-              list.map((item) => (
-                <SwiperItem>
-                    <img src={item.image} />
-                </SwiperItem>
-              ))
-            }
+            {list.map((item) => (
+              <SwiperItem>
+                <img src={item.image} />
+              </SwiperItem>
+            ))}
           </Swiper>
         );
       },
@@ -311,13 +301,11 @@ describe('navigation', () => {
             navigation={navigation}
             onChange={onChange}
           >
-            {
-              list.map((item) => (
-                <SwiperItem>
-                    <img src={item.image} />
-                </SwiperItem>
-              ))
-            }
+            {list.map((item) => (
+              <SwiperItem>
+                <img src={item.image} />
+              </SwiperItem>
+            ))}
           </Swiper>
         );
       },
@@ -332,8 +320,8 @@ describe('navigation', () => {
     // 模拟触发 click 事件
     $btnPrev.trigger('click');
     await sleep(200);
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith(0);
+    expect(onChange).toHaveBeenCalledTimes(1, { source: 'nav' });
+    expect(onChange).toHaveBeenCalledWith(0, { source: 'nav' });
   });
 
   it(':slot', async () => {
@@ -344,15 +332,15 @@ describe('navigation', () => {
             {{
               default: list.map((item) => (
                 <SwiperItem>
-                    <img src={item.image} />
+                  <img src={item.image} />
                 </SwiperItem>
               )),
-              navigation: () => <div class="test-navigation">navigation</div>
+              navigation: () => <div class="test-navigation">navigation</div>,
             }}
           </Swiper>
         );
       },
     });
     expect(wrapper.find('.test-navigation').text()).toBe('navigation');
-  })
+  });
 });