.github/workflows/codeql-analysis.yml

@@ -1,71 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ dev ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ dev ]
-  schedule:
-    - cron: '36 21 * * 2'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
-        # Learn more:
-        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1

src/composables/on-popup-reopen.ts

@@ -1,19 +0,0 @@
-import { inject, watch } from 'vue';
-
-// eslint-disable-next-line
-export const POPUP_TOGGLE_KEY = Symbol();
-
-export function onPopupReopen(callback: () => void) {
-  const popupToggleStatus = inject<(() => boolean) | null>(
-    POPUP_TOGGLE_KEY,
-    null
-  );
-
-  if (popupToggleStatus) {
-    watch(popupToggleStatus, (show) => {
-      if (show) {
-        callback();
-      }
-    });
-  }
-}

src/popup/Popup.tsx

@@ -1,7 +1,6 @@
 import {
   ref,
   watch,
-  provide,
   Teleport,
   computed,
   PropType,
@@ -22,7 +21,6 @@ import { useEventListener } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 import { useLockScroll } from '../composables/use-lock-scroll';
 import { useLazyRender } from '../composables/use-lazy-render';
-import { POPUP_TOGGLE_KEY } from '../composables/on-popup-reopen';
 
 // Components
 import { Icon } from '../icon';
@@ -247,8 +245,6 @@ export default defineComponent({
       }
     });
 
-    provide(POPUP_TOGGLE_KEY, () => props.show);
-
     return () => {
       if (props.teleport) {
         return (

src/swipe/README.md

@@ -115,13 +115,13 @@ export default {
 ### Custom Indicator
 
 ```html
-<van-swipe>
+<van-swipe @change="onChange">
   <van-swipe-item>1</van-swipe-item>
   <van-swipe-item>2</van-swipe-item>
   <van-swipe-item>3</van-swipe-item>
   <van-swipe-item>4</van-swipe-item>
-  <template #indicator="{ active }">
-    <div class="custom-indicator">{{ active + 1 }}/4</div>
+  <template #indicator>
+    <div class="custom-indicator">{{ current + 1 }}/4</div>
   </template>
 </van-swipe>
 
@@ -137,6 +137,23 @@ export default {
 </style>
 ```
 
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const current = ref(0);
+    const onChange = (index) => {
+      current.value = index;
+    };
+    return {
+      current,
+      onChange,
+    };
+  },
+};
+```
+
 ## API
 
 ### Swipe Props
@@ -176,10 +193,10 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Swipe
 | --- | --- | --- | --- |
 | prev | Swipe to prev item | - | - |
 | next | Swipe to next item | - | - |
-| swipeTo | Swipe to target index | _index: number, options: SwipeToOptions_ | - |
+| swipeTo | Swipe to target index | index: target index, options: Options | - |
 | resize | Resize Swipe when container element resized or visibility changed | - | - |
 
-### SwipeToOptions
+### swipeTo Options
 
 | Name      | Description               | Type      |
 | --------- | ------------------------- | --------- |
@@ -187,10 +204,10 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Swipe
 
 ### Swipe Slots
 
-| Name                | Description      | SlotProps            |
-| ------------------- | ---------------- | -------------------- |
-| default             | Content          | -                    |
-| indicator `v3.0.16` | Custom indicator | _{ active: number }_ |
+| Name      | Description      |
+| --------- | ---------------- |
+| default   | Content          |
+| indicator | Custom indicator |
 
 ### Less Variables
 

src/swipe/README.zh-CN.md

@@ -68,8 +68,6 @@ export default {
 
 ### 监听 change 事件
 
-在每一页轮播结束后，会触发 `change` 事件。
-
 ```html
 <van-swipe @change="onChange">
   <van-swipe-item>1</van-swipe-item>
@@ -123,13 +121,13 @@ export default {
 通过 `indicator` 插槽可以自定义指示器的样式。
 
 ```html
-<van-swipe>
+<van-swipe @change="onChange">
   <van-swipe-item>1</van-swipe-item>
   <van-swipe-item>2</van-swipe-item>
   <van-swipe-item>3</van-swipe-item>
   <van-swipe-item>4</van-swipe-item>
-  <template #indicator="{ active }">
-    <div class="custom-indicator">{{ active + 1 }}/4</div>
+  <template #indicator>
+    <div class="custom-indicator">{{ current + 1 }}/4</div>
   </template>
 </van-swipe>
 
@@ -145,6 +143,23 @@ export default {
 </style>
 ```
 
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const current = ref(0);
+    const onChange = (index) => {
+      current.value = index;
+    };
+    return {
+      current,
+      onChange,
+    };
+  },
+};
+```
+
 ## API
 
 ### Swipe Props
@@ -154,8 +169,8 @@ export default {
 | autoplay         | 自动轮播间隔，单位为 ms  | _number \| string_ | -         |
 | duration         | 动画时长，单位为 ms      | _number \| string_ | `500`     |
 | initial-swipe    | 初始位置索引值           | _number \| string_ | `0`       |
-| width            | 滑块宽度，单位为 `px`    | _number \| string_ | `auto`    |
-| height           | 滑块高度，单位为 `px`    | _number \| string_ | `auto`    |
+| width            | 滑块宽度，单位为`px`     | _number \| string_ | `auto`    |
+| height           | 滑块高度，单位为`px`     | _number \| string_ | `auto`    |
 | loop             | 是否开启循环播放         | _boolean_          | `true`    |
 | show-indicators  | 是否显示指示器           | _boolean_          | `true`    |
 | vertical         | 是否为纵向滚动           | _boolean_          | `false`   |
@@ -184,10 +199,10 @@ export default {
 | --- | --- | --- | --- |
 | prev | 切换到上一轮播 | - | - |
 | next | 切换到下一轮播 | - | - |
-| swipeTo | 切换到指定位置 | _index: number, options: SwipeToOptions_ | - |
+| swipeTo | 切换到指定位置 | index: number, options: Options | - |
 | resize | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | - | - |
 
-### SwipeToOptions 格式
+### swipeTo Options 格式
 
 | 名称      | 说明         | 类型      |
 | --------- | ------------ | --------- |
@@ -195,10 +210,10 @@ export default {
 
 ### Swipe Slots
 
-| 名称                | 说明         | 参数                 |
-| ------------------- | ------------ | -------------------- |
-| default             | 轮播内容     | -                    |
-| indicator `v3.0.16` | 自定义指示器 | _{ active: number }_ |
+| 名称      | 说明         |
+| --------- | ------------ |
+| default   | 轮播内容     |
+| indicator | 自定义指示器 |
 
 ### 样式变量
 
@@ -217,7 +232,7 @@ export default {
 
 ### 滑动轮播时为什么触发了 click 事件？
 
-这种情况通常是由于项目中引入了 `fastclick` 库导致的。`fastclick` 的原理是通过 Touch 事件模拟出 click 事件，而 Swipe 内部默认会阻止 touchmove 事件冒泡，干扰了 fastclick 的判断，导致出现这个问题。
+这种情况通常是由于项目中引入了`fastclick`库导致的。`fastclick`的原理是通过 Touch 事件模拟出 click 事件，而 Swipe 内部默认会阻止 touchmove 事件冒泡，干扰了 fastclick 的判断，导致出现这个问题。
 
 将 Swipe 组件的 stop-propagation 属性设置为 false 即可避免该问题。
 

src/swipe/Swipe.tsx

@@ -32,7 +32,6 @@ import {
 } from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';
-import { onPopupReopen } from '../composables/on-popup-reopen';
 
 const [name, bem] = createNamespace('swipe');
 
@@ -220,7 +219,6 @@ export default defineComponent({
       }
     };
 
-    // swipe to prev item
     const prev = () => {
       correctPosition();
       touch.reset();
@@ -234,7 +232,6 @@ export default defineComponent({
       });
     };
 
-    // swipe to next item
     const next = () => {
       correctPosition();
       touch.reset();
@@ -250,11 +247,13 @@ export default defineComponent({
 
     let autoplayTimer: NodeJS.Timeout;
 
-    const stopAutoplay = () => clearTimeout(autoplayTimer);
+    const stopAutoplay = () => {
+      clearTimeout(autoplayTimer);
+    };
 
     const autoplay = () => {
-      stopAutoplay();
       if (props.autoplay > 0 && count.value > 1) {
+        stopAutoplay();
         autoplayTimer = setTimeout(() => {
           next();
           autoplay();
@@ -264,30 +263,32 @@ export default defineComponent({
 
     // initialize swipe position
     const initialize = (active = +props.initialSwipe) => {
-      if (!root.value) {
+      if (!root.value || isHidden(root)) {
         return;
       }
 
-      if (!isHidden(root)) {
-        const rect = {
-          width: root.value.offsetWidth,
-          height: root.value.offsetHeight,
-        };
-        state.rect = rect;
-        state.width = +(props.width ?? rect.width);
-        state.height = +(props.height ?? rect.height);
-      }
+      stopAutoplay();
+
+      const rect = {
+        width: root.value.offsetWidth,
+        height: root.value.offsetHeight,
+      };
 
       if (count.value) {
         active = Math.min(count.value - 1, active);
       }
 
-      state.active = active;
+      state.rect = rect;
       state.swiping = true;
+      state.active = active;
+      state.width = +(props.width ?? rect.width);
+      state.height = +(props.height ?? rect.height);
       state.offset = getTargetOffset(active);
       children.forEach((swipe) => {
         swipe.setOffset(0);
       });
+
+      autoplay();
     };
 
     const resize = () => initialize(state.active);
@@ -392,9 +393,7 @@ export default defineComponent({
 
     const renderIndicator = () => {
       if (slots.indicator) {
-        return slots.indicator({
-          active: activeIndicator.value,
-        });
+        return slots.indicator();
       }
       if (props.showIndicators && count.value > 1) {
         return (
@@ -426,8 +425,20 @@ export default defineComponent({
     );
 
     watch(count, () => initialize(state.active));
-    watch([count, () => props.autoplay], autoplay);
+
+    watch(
+      () => props.autoplay,
+      (value) => {
+        if (value > 0) {
+          autoplay();
+        } else {
+          stopAutoplay();
+        }
+      }
+    );
+
     watch([windowSize.width, windowSize.height], resize);
+
     watch(usePageVisibility(), (visible) => {
       if (visible === 'visible') {
         autoplay();
@@ -438,7 +449,6 @@ export default defineComponent({
 
     onMounted(initialize);
     onActivated(() => initialize(state.active));
-    onPopupReopen(() => initialize(state.active));
     onDeactivated(stopAutoplay);
     onBeforeUnmount(stopAutoplay);
 

src/swipe/demo/index.vue

@@ -17,7 +17,7 @@
   </demo-block>
 
   <demo-block :title="t('title3')">
-    <van-swipe indicator-color="white" @change="onChange">
+    <van-swipe indicator-color="white" @change="onChange1">
       <van-swipe-item>1</van-swipe-item>
       <van-swipe-item>2</van-swipe-item>
       <van-swipe-item>3</van-swipe-item>
@@ -50,19 +50,21 @@
   </demo-block>
 
   <demo-block :title="t('title6')">
-    <van-swipe>
+    <van-swipe @change="onChange2">
       <van-swipe-item>1</van-swipe-item>
       <van-swipe-item>2</van-swipe-item>
       <van-swipe-item>3</van-swipe-item>
       <van-swipe-item>4</van-swipe-item>
-      <template #indicator="{ active }">
-        <div class="custom-indicator">{{ active + 1 }}/4</div>
+
+      <template #indicator>
+        <div class="custom-indicator">{{ current + 1 }}/4</div>
       </template>
     </van-swipe>
   </demo-block>
 </template>
 
 <script lang="ts">
+import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
@@ -88,6 +90,7 @@ const i18n = {
 export default {
   setup() {
     const t = useTranslate(i18n);
+    const current = ref(0);
     const images = [
       'https://img.yzcdn.cn/vant/apple-1.jpg',
       'https://img.yzcdn.cn/vant/apple-2.jpg',
@@ -95,12 +98,17 @@ export default {
       'https://img.yzcdn.cn/vant/apple-4.jpg',
     ];
 
-    const onChange = (index: number) => Toast(t('message') + index);
+    const onChange1 = (index: number) => Toast(t('message') + index);
+    const onChange2 = (index: number) => {
+      current.value = index;
+    };
 
     return {
       t,
       images,
-      onChange,
+      current,
+      onChange1,
+      onChange2,
     };
   },
 };

src/tabs/Tabs.tsx

@@ -42,7 +42,6 @@ import {
 import { route, RouteProps } from '../composables/use-route';
 import { useRefs } from '../composables/use-refs';
 import { useExpose } from '../composables/use-expose';
-import { onPopupReopen } from '../composables/on-popup-reopen';
 
 // Components
 import { Sticky } from '../sticky';
@@ -124,8 +123,10 @@ export default defineComponent({
     const state = reactive({
       inited: false,
       position: '',
-      lineStyle: {} as CSSProperties,
       currentIndex: -1,
+      lineStyle: {
+        backgroundColor: props.color,
+      } as CSSProperties,
     });
 
     // whether the nav is scrollable
@@ -442,7 +443,6 @@ export default defineComponent({
     });
 
     onActivated(setLine);
-    onPopupReopen(setLine);
     onMountedOrActivated(init);
     useEventListener('scroll', onScroll, { target: scroller.value });