From e498a7f1df2018583462c939c1f46141022b257e Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Thu, 20 Jul 2023 17:29:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(swipe):=20=E6=96=B0=E5=A2=9E=20SwipeGroup?=
 =?UTF-8?q?=20(#2439)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/basic/pages/button/index.vue          |  19 ++-
 .../src/feedback/pages/swipe/index.vue        |  69 +++++-----
 src/config.json                               |  10 ++
 .../__VUE/swipe/__tests__/swipe.spec.tsx      | 108 ++++++++++++++-
 src/packages/__VUE/swipe/demo.vue             |  85 ++++++------
 src/packages/__VUE/swipe/doc.en-US.md         | 115 +++++++++-------
 src/packages/__VUE/swipe/doc.md               | 123 +++++++++++-------
 src/packages/__VUE/swipe/doc.taro.md          | 117 ++++++++++-------
 src/packages/__VUE/swipe/index.scss           |   1 +
 src/packages/__VUE/swipe/index.taro.vue       |  79 +++++++----
 src/packages/__VUE/swipe/index.vue            |  76 +++++++----
 src/packages/__VUE/swipegroup/index.scss      |   0
 src/packages/__VUE/swipegroup/index.taro.vue  |  31 +++++
 src/packages/__VUE/swipegroup/index.vue       |  31 +++++
 src/packages/utils/unit.ts                    |   7 +
 15 files changed, 593 insertions(+), 278 deletions(-)
 create mode 100644 src/packages/__VUE/swipegroup/index.scss
 create mode 100644 src/packages/__VUE/swipegroup/index.taro.vue
 create mode 100644 src/packages/__VUE/swipegroup/index.vue

diff --git a/packages/nutui-taro-demo/src/basic/pages/button/index.vue b/packages/nutui-taro-demo/src/basic/pages/button/index.vue
index 717d01d258..44ec05a7aa 100644
--- a/packages/nutui-taro-demo/src/basic/pages/button/index.vue
+++ b/packages/nutui-taro-demo/src/basic/pages/button/index.vue
@@ -103,18 +103,25 @@ export default {
 <style lang="scss">
 .demo-button-row {
   margin-bottom: 20px;
+  .nut-button {
+    margin-right: 15px;
+    &:last-child {
+      margin-bottom: 0;
+      margin-right: 0;
+    }
+  }
 }
 .demo-button-row2 {
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-}
-.nut-button {
-  margin-right: 15px;
-  &:last-child {
-    margin-bottom: 0;
-    margin-right: 0;
+  .nut-button {
+    margin-right: 15px;
+    &:last-child {
+      margin-bottom: 0;
+      margin-right: 0;
+    }
   }
 }
 </style>
diff --git a/packages/nutui-taro-demo/src/feedback/pages/swipe/index.vue b/packages/nutui-taro-demo/src/feedback/pages/swipe/index.vue
index 91649e0d33..31e742a9d4 100644
--- a/packages/nutui-taro-demo/src/feedback/pages/swipe/index.vue
+++ b/packages/nutui-taro-demo/src/feedback/pages/swipe/index.vue
@@ -26,13 +26,9 @@
         <nut-button shape="square" style="height: 100%" type="info">收藏</nut-button>
       </template>
     </nut-swipe>
-    <h2>异步控制</h2>
-    <nut-swipe ref="refSwipe" @open="open" @close="close">
-      <nut-cell title="异步打开关闭">
-        <template v-slot:link>
-          <nut-switch v-model="checked" @change="changSwitch" active-text="开" inactive-text="关" />
-        </template>
-      </nut-cell>
+    <h2>异步控制 <nut-switch v-model="checked" @change="changSwitch" /></h2>
+    <nut-swipe ref="refSwipe">
+      <nut-cell title="异步打开关闭"></nut-cell>
       <template #right>
         <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
       </template>
@@ -52,38 +48,45 @@
         <nut-button shape="square" style="height: 100%" type="info">收藏</nut-button>
       </template>
     </nut-swipe>
+    <h2>使用 SwipeGroup 控制 Swipe 之间互斥</h2>
+    <nut-swipe-group lock>
+      <nut-swipe name="11">
+        <nut-cell round-radius="0" title="左滑删除" />
+        <template #right>
+          <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+        </template>
+      </nut-swipe>
+      <nut-swipe name="22">
+        <nut-cell round-radius="0" title="左滑删除" />
+        <template #right>
+          <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+        </template>
+      </nut-swipe>
+      <div>
+        <nut-swipe name="33">
+          <nut-cell round-radius="0" title="左滑删除" />
+          <template #right>
+            <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+          </template>
+        </nut-swipe>
+      </div>
+    </nut-swipe-group>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const refSwipe = ref<HTMLElement>();
-    const checked = ref(false);
-    const number = ref(0);
-    const changSwitch = (value: boolean) => {
-      if (value) {
-        refSwipe.value?.open('left');
-      } else {
-        refSwipe.value?.close();
-      }
-    };
-    const open = (obj: any) => {
-      console.log(obj);
-    };
-    const close = (obj: any) => {
-      console.log(obj);
-    };
-    return { checked, number, changSwitch, refSwipe, open, close, env };
+const env = Taro.getEnv();
+const refSwipe = ref<HTMLElement>();
+const checked = ref(false);
+const number = ref(0);
+const changSwitch = (value: boolean) => {
+  if (value) {
+    refSwipe.value?.open('left');
+  } else {
+    refSwipe.value?.close();
   }
 };
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/config.json b/src/config.json
index be404b6214..66787dbd91 100644
--- a/src/config.json
+++ b/src/config.json
@@ -663,6 +663,16 @@
           "show": true,
           "author": "richard1015"
         },
+        {
+          "name": "SwipeGroup",
+          "taro": true,
+          "cName": "滑动手势",
+          "type": "component",
+          "show": false,
+          "exportEmpty": true,
+          "desc": "Swipe 的集合，用于控制互斥",
+          "author": "eiinu"
+        },
         {
           "version": "3.0.0",
           "name": "ActionSheet",
diff --git a/src/packages/__VUE/swipe/__tests__/swipe.spec.tsx b/src/packages/__VUE/swipe/__tests__/swipe.spec.tsx
index 088c4377d3..c3124dbe0a 100644
--- a/src/packages/__VUE/swipe/__tests__/swipe.spec.tsx
+++ b/src/packages/__VUE/swipe/__tests__/swipe.spec.tsx
@@ -1,16 +1,18 @@
 import { DOMWrapper, mount } from '@vue/test-utils';
 import Swipe from '../index.vue';
+import SwipeGroup from '../../swipegroup/index.vue';
 import { nextTick } from 'vue';
 import Button from '../../button/index.vue';
 import Cell from '../../cell/index.vue';
+import { triggerDrag, mockGetBoundingClientRect } from '@/packages/utils/unit';
 
-test('base swipe', () => {
+test('Swipe: base swipe', () => {
   const wrapper = mount(Swipe);
   const swipe: DOMWrapper<Element> = wrapper.find('.nut-swipe');
   expect(swipe.exists()).toBe(true);
 });
 
-test('base swipe props disabled', async () => {
+test('Swipe: base swipe props disabled', async () => {
   const wrapper = mount(() => {
     return (
       <Swipe disabled={false}>
@@ -37,7 +39,7 @@ test('base swipe props disabled', async () => {
   expect(swipe1.text()).toBe('删除');
   expect(swipe2.exists()).toBe(true);
 });
-test('base swipe Slots', async () => {
+test('Swipe: base swipe Slots', async () => {
   const wrapper = mount(() => (
     <Swipe>
       {{
@@ -56,7 +58,7 @@ test('base swipe Slots', async () => {
   expect(swipe.text()).toBe('选择');
   expect(swipe2.exists()).toBe(true);
 });
-test('base swipe content', async () => {
+test('Swipe: base swipe content', async () => {
   const wrapper = mount(() => (
     <Swipe>
       <Cell round-radio="0" desc="左滑右滑都可以哦"></Cell>
@@ -69,3 +71,101 @@ test('base swipe content', async () => {
   expect(swipe2.text()).toBe('左滑右滑都可以哦');
   expect(swipe3.exists()).toBe(true);
 });
+
+test('Swipe: ref open & close', async () => {
+  const wrapper = mount(() => (
+    <Swipe>
+      {{
+        right: () => '右侧按钮'
+      }}
+    </Swipe>
+  ));
+  mockGetBoundingClientRect({ width: 99 });
+  const swipe = wrapper.getComponent(Swipe);
+  expect(swipe.element.outerHTML).toContain('translate3d(0');
+  swipe.vm.open('left');
+  await nextTick();
+  expect(swipe.element.outerHTML).toContain('translate3d(-99');
+  swipe.vm.close();
+  await nextTick();
+  expect(swipe.element.outerHTML).toContain('translate3d(0');
+});
+
+test('Swipe: ref open & click close', async () => {
+  const wrapper = mount(() => (
+    <Swipe>
+      {{
+        right: () => '右侧按钮'
+      }}
+    </Swipe>
+  ));
+  mockGetBoundingClientRect({ width: 99 });
+  const swipe = wrapper.getComponent(Swipe);
+  swipe.vm.open('left');
+  await nextTick();
+  expect(swipe.element.outerHTML).toContain('translate3d(-99');
+  wrapper.find('.nut-swipe__content').trigger('click');
+  await nextTick();
+  expect(swipe.element.outerHTML).toContain('translate3d(0');
+});
+
+test('Swipe: touch event right', async () => {
+  const wrapper = mount(() => (
+    <Swipe>
+      {{
+        right: () => '右侧按钮'
+      }}
+    </Swipe>
+  ));
+  mockGetBoundingClientRect({ width: 99 });
+  const swipe = wrapper.getComponent(Swipe);
+  triggerDrag(wrapper, -10, 0);
+  await nextTick();
+  expect(swipe.element.outerHTML).toContain('translate3d(0');
+  triggerDrag(wrapper, -90, 0);
+  await nextTick();
+  expect(swipe.element.outerHTML).toContain('translate3d(-99');
+  swipe.vm.close();
+  await nextTick();
+  expect(swipe.element.outerHTML).toContain('translate3d(0');
+});
+
+test('Swipe: touch event left', async () => {
+  const wrapper = mount(() => (
+    <Swipe touchMovePreventDefault touchMoveStopPropagation>
+      {{
+        left: () => '左侧按钮'
+      }}
+    </Swipe>
+  ));
+  mockGetBoundingClientRect({ width: 99 });
+  const swipe = wrapper.getComponent(Swipe);
+  triggerDrag(wrapper, +10, 0);
+  await nextTick();
+  expect(swipe.element.outerHTML).toContain('translate3d(0');
+  triggerDrag(wrapper, +90, 0);
+  await nextTick();
+  expect(swipe.element.outerHTML).toContain('translate3d(99');
+  swipe.vm.close();
+  await nextTick();
+  expect(swipe.element.outerHTML).toContain('translate3d(0');
+});
+
+test('Swipe: SwipeGroup lock', async () => {
+  const wrapper = mount(() => (
+    <SwipeGroup lock>
+      <Swipe name="111">{{ right: () => '右侧' }}</Swipe>
+      <Swipe name="222">{{ right: () => '右侧' }}</Swipe>
+      <Swipe name="333">{{ right: () => '右侧' }}</Swipe>
+    </SwipeGroup>
+  ));
+  mockGetBoundingClientRect({ width: 99 });
+  const swipes = wrapper.findAllComponents(Swipe);
+  triggerDrag(swipes[0], -90, 0);
+  await nextTick();
+  expect(swipes[0].element.outerHTML).toContain('translate3d(-99');
+  triggerDrag(swipes[1], -90, 0);
+  await nextTick();
+  expect(swipes[0].element.outerHTML).toContain('translate3d(0');
+  expect(swipes[1].element.outerHTML).toContain('translate3d(-99');
+});
diff --git a/src/packages/__VUE/swipe/demo.vue b/src/packages/__VUE/swipe/demo.vue
index 5341cffb32..58f00a776d 100644
--- a/src/packages/__VUE/swipe/demo.vue
+++ b/src/packages/__VUE/swipe/demo.vue
@@ -25,18 +25,12 @@
         <nut-button shape="square" style="height: 100%" type="info">{{ translate('collect') }}</nut-button>
       </template>
     </nut-swipe>
-    <h2>{{ translate('async') }}</h2>
-    <nut-swipe ref="refSwipe" @open="open" @close="close">
-      <nut-cell :title="translate('asyncDesc')">
-        <template #link>
-          <nut-switch
-            v-model="checked"
-            @change="changSwitch"
-            :active-text="translate('open')"
-            :inactive-text="translate('close')"
-          />
-        </template>
-      </nut-cell>
+    <h2>
+      {{ translate('async') }}
+      <nut-switch v-model="checked" @change="changSwitch" />
+    </h2>
+    <nut-swipe ref="refSwipe">
+      <nut-cell :title="translate('asyncDesc')"> </nut-cell>
       <template #right>
         <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
       </template>
@@ -56,11 +50,34 @@
         <nut-button shape="square" style="height: 100%" type="info">{{ translate('collect') }}</nut-button>
       </template>
     </nut-swipe>
+    <h2>使用 SwipeGroup 控制 Swipe 之间互斥</h2>
+    <nut-swipe-group lock>
+      <nut-swipe name="11">
+        <nut-cell round-radius="0" :title="translate('leftDel')" />
+        <template #right>
+          <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
+        </template>
+      </nut-swipe>
+      <nut-swipe name="22">
+        <nut-cell round-radius="0" :title="translate('leftDel')" />
+        <template #right>
+          <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
+        </template>
+      </nut-swipe>
+      <div>
+        <nut-swipe name="33">
+          <nut-cell round-radius="0" :title="translate('leftDel')" />
+          <template #right>
+            <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
+          </template>
+        </nut-swipe>
+      </div>
+    </nut-swipe-group>
   </div>
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('swipe');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -80,7 +97,8 @@ const initTranslate = () =>
       desc: '商品描述',
       delete: '删除',
       select: '选择',
-      collect: '收藏'
+      collect: '收藏',
+      group: '使用 SwipeGroup 控制 Swipe 之间互斥'
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -96,32 +114,19 @@ const initTranslate = () =>
       desc: 'product description',
       delete: 'Delelte',
       select: 'Select',
-      collect: 'Collect'
+      collect: 'Collect',
+      group: 'Use SwipeGroup to make swipe exclusive'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const refSwipe = ref<HTMLElement>();
-    const checked = ref(false);
-    const number = ref(0);
-    const changSwitch = (value: boolean) => {
-      if (value) {
-        refSwipe.value?.open('left');
-      } else {
-        refSwipe.value?.close();
-      }
-    };
-    const open = (obj: any) => {
-      console.log(obj);
-    };
-    const close = (obj: any) => {
-      console.log(obj);
-    };
-    return { checked, number, changSwitch, refSwipe, open, close, translate };
+initTranslate();
+const refSwipe = ref<HTMLElement>();
+const checked = ref(false);
+const number = ref(0);
+const changSwitch = (value: boolean) => {
+  if (value) {
+    refSwipe.value?.open('left');
+  } else {
+    refSwipe.value?.close();
   }
-});
+};
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/packages/__VUE/swipe/doc.en-US.md b/src/packages/__VUE/swipe/doc.en-US.md
index 0be326d848..dbbfbd4a5a 100644
--- a/src/packages/__VUE/swipe/doc.en-US.md
+++ b/src/packages/__VUE/swipe/doc.en-US.md
@@ -6,7 +6,7 @@ Used for cell components that can slide left and right to display operation butt
 
 ## Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Swipe } from '@nutui/nutui';
 
@@ -20,7 +20,7 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swipe>
     <nut-cell round-radius="0" title="Swipe left to delete" />
@@ -37,7 +37,7 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swipe disabled>
     <nut-cell round-radius="0" title="Disable swipe" />
@@ -54,7 +54,7 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swipe>
     <template #left>
@@ -75,41 +75,26 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swipe ref="refSwipe" @open="open" @close="close">
-    <nut-cell title="Async on and off">
-      <template v-slot:link>
-        <nut-switch v-model="checked" @change="changSwitch" active-text="on" inactive-text="off" />
-      </template>
-    </nut-cell>
+  <nut-switch v-model="checked" @change="changSwitch" />
+  <nut-swipe ref="refSwipe">
+    <nut-cell title="Async on and off"></nut-cell>
     <template #right>
       <nut-button shape="square" style="height:100%" type="danger">Delelte</nut-button>
     </template>
   </nut-swipe>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const refSwipe = ref<HTMLElement>();
-      const checked = ref(false);
-      const changSwitch = (value: boolean) => {
-        if (value) {
-          refSwipe.value?.open('left');
-        } else {
-          refSwipe.value?.close();
-        }
-      };
-      const open = (obj: any) => {
-        console.log(obj);
-      };
-      const close = (obj: any) => {
-        console.log(obj);
-      };
-      return { checked, changSwitch, refSwipe, open, close };
-    }
-  };
+<script setup>
+const refSwipe = ref<HTMLElement>();
+const checked = ref(false);
+const changSwitch = (value) => {
+  if (value) {
+    refSwipe.value?.open('left');
+  } else {
+    refSwipe.value?.close();
+  }
+};
 </script>
 ```
 
@@ -119,7 +104,7 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swipe>
     <template #left>
@@ -136,19 +121,48 @@ app.use(Swipe);
     </template>
   </nut-swipe>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const number = ref(0);
-      return { number };
-    }
-  };
+<script setup>
+const number = ref(0);
 </script>
 ```
 
 :::
 
+### Use SwipeGroup to make swipe exclusive
+
+The prop `name` of Swipe is required.
+
+:::demo
+
+```vue
+<template>
+  <nut-swipe-group lock>
+    <nut-swipe name="11">
+      <nut-cell round-radius="0" title="Swipe left to delete" />
+      <template #right>
+        <nut-button shape="square" style="height: 100%" type="danger">delete</nut-button>
+      </template>
+    </nut-swipe>
+    <nut-swipe name="22">
+      <nut-cell round-radius="0" title="Swipe left to delete" />
+      <template #right>
+        <nut-button shape="square" style="height: 100%" type="danger">delete</nut-button>
+      </template>
+    </nut-swipe>
+    <div>
+      <nut-swipe name="33">
+        <nut-cell round-radius="0" title="Swipe left to delete" />
+        <template #right>
+          <nut-button shape="square" style="height: 100%" type="danger">delete</nut-button>
+        </template>
+      </nut-swipe>
+    </div>
+  </nut-swipe-group>
+</template>
+```
+
+:::
+
 ## Swipe
 
 ### Props
@@ -179,7 +193,16 @@ app.use(Swipe);
 
 Use [ref](https://vuejs.org/guide/essentials/template-refs.html) to get Swipe instance and call instance methods.
 
-| Name  | Description                         | Arguments                            |
-| ----- | ----------------------------------- | ------------------------------------ |
-| open  | open swipe, swipe left/swipe right  | `name, position: 'left' \| 'right' ` |
-| close | close swipe, swipe left/swipe right | `name, position: 'left' \| 'right' ` |
+| Name  | Description                         | Arguments                                        |
+| ----- | ----------------------------------- | ------------------------------------------------ |
+| click | click event                         | `name, position: 'left' \| 'content' \| 'right'` |
+| open  | open swipe, swipe left/swipe right  | `name, position: 'left' \| 'right' `             |
+| close | close swipe, swipe left/swipe right | `name, position: 'left' \| 'right' `             |
+
+## SwipeGroup
+
+### Props
+
+| Attribute    | Description                                  | Type    | Default |
+| ------------ | -------------------------------------------- | ------- | ------- |
+| lock`v4.1.1` | When a child Swipe opens, others will close. | boolean | `false` |
diff --git a/src/packages/__VUE/swipe/doc.md b/src/packages/__VUE/swipe/doc.md
index 7ca7b8eca0..5b8220a04d 100644
--- a/src/packages/__VUE/swipe/doc.md
+++ b/src/packages/__VUE/swipe/doc.md
@@ -6,7 +6,7 @@
 
 ## 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Swipe } from '@nutui/nutui';
 
@@ -20,7 +20,7 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swipe>
     <nut-cell round-radius="0" title="左滑删除" />
@@ -37,7 +37,7 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swipe disabled>
     <nut-cell round-radius="0" title="禁止滑动" />
@@ -54,7 +54,7 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swipe>
     <template #left>
@@ -75,41 +75,26 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swipe ref="refSwipe" @open="open" @close="close">
-    <nut-cell title="异步打开关闭">
-      <template v-slot:link>
-        <nut-switch v-model="checked" @change="changSwitch" active-text="开" inactive-text="关" />
-      </template>
-    </nut-cell>
+  <nut-switch v-model="checked" @change="changSwitch" />
+  <nut-swipe ref="refSwipe">
+    <nut-cell title="异步打开关闭"></nut-cell>
     <template #right>
       <nut-button shape="square" style="height:100%" type="danger">删除</nut-button>
     </template>
   </nut-swipe>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const refSwipe = ref<HTMLElement>();
-      const checked = ref(false);
-      const changSwitch = (value: boolean) => {
-        if (value) {
-          refSwipe.value?.open('left');
-        } else {
-          refSwipe.value?.close();
-        }
-      };
-      const open = (obj: any) => {
-        console.log(obj);
-      };
-      const close = (obj: any) => {
-        console.log(obj);
-      };
-      return { checked, changSwitch, refSwipe, open, close };
-    }
-  };
+<script setup>
+const refSwipe = ref<HTMLElement>();
+const checked = ref(false);
+const changSwitch = (value) => {
+  if (value) {
+    refSwipe.value?.open('left');
+  } else {
+    refSwipe.value?.close();
+  }
+};
 </script>
 ```
 
@@ -119,7 +104,7 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swipe>
     <template #left>
@@ -136,19 +121,48 @@ app.use(Swipe);
     </template>
   </nut-swipe>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const number = ref(0);
-      return { number };
-    }
-  };
+<script setup>
+const number = ref(0);
 </script>
 ```
 
 :::
 
+### 使用 SwipeGroup 控制 Swipe 之间互斥
+
+此时各个 Swipe 的 name 为必填项。
+
+:::demo
+
+```vue
+<template>
+  <nut-swipe-group lock>
+    <nut-swipe name="11">
+      <nut-cell round-radius="0" title="左滑删除" />
+      <template #right>
+        <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+      </template>
+    </nut-swipe>
+    <nut-swipe name="22">
+      <nut-cell round-radius="0" title="左滑删除" />
+      <template #right>
+        <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+      </template>
+    </nut-swipe>
+    <div>
+      <nut-swipe name="33">
+        <nut-cell round-radius="0" title="左滑删除" />
+        <template #right>
+          <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+        </template>
+      </nut-swipe>
+    </div>
+  </nut-swipe-group>
+</template>
+```
+
+:::
+
 ## Swipe
 
 ### Props
@@ -162,10 +176,10 @@ app.use(Swipe);
 
 ### Events
 
-| 事件名 | 说明                                      | 回调参数                             |
-| ------ | ----------------------------------------- | ------------------------------------ |
-| open   | 滑动时触发，left 指向左滑，right 指向右滑 | `name, position: 'left' \| 'right' ` |
-| close  | 关闭时触发，同上                          | `name, position: 'left' \| 'right' ` |
+| 事件名 | 说明                                      | 回调参数                            |
+| ------ | ----------------------------------------- | ----------------------------------- |
+| open   | 滑动时触发，left 指向左滑，right 指向右滑 | `name, position: 'left' \| 'right'` |
+| close  | 关闭时触发，同上                          | `name, position: 'left' \| 'right'` |
 
 ### Slots
 
@@ -179,7 +193,16 @@ app.use(Swipe);
 
 通过 [ref](https://vuejs.org/guide/essentials/template-refs.html) 可以获取到 `Swipe` 实例并调用实例方法。
 
-| 方法名 | 说明                                            | 参数                                 |
-| ------ | ----------------------------------------------- | ------------------------------------ |
-| open   | 滑动单元格侧边栏，left 指向左滑，right 指向右滑 | `name, position: 'left' \| 'right' ` |
-| close  | 收起单元格侧边栏，同上                          | `name, position: 'left' \| 'right' ` |
+| 方法名 | 说明                                            | 参数                                             |
+| ------ | ----------------------------------------------- | ------------------------------------------------ |
+| click  | 点击事件                                        | `name, position: 'left' \| 'content' \| 'right'` |
+| open   | 滑动单元格侧边栏，left 指向左滑，right 指向右滑 | `name, position: 'left' \| 'right'`              |
+| close  | 收起单元格侧边栏，同上                          | `name, position: 'left' \| 'right'`              |
+
+## SwipeGroup
+
+### Props
+
+| 参数         | 说明                                                                         | 类型    | 默认值  |
+| ------------ | ---------------------------------------------------------------------------- | ------- | ------- |
+| lock`v4.1.1` | 控制内部 Swipe 互斥，即滑动打开某一个 Swipe 时，触发其余 Swipe 的 close 方法 | boolean | `false` |
diff --git a/src/packages/__VUE/swipe/doc.taro.md b/src/packages/__VUE/swipe/doc.taro.md
index 0c8e0b7f48..83821e307a 100644
--- a/src/packages/__VUE/swipe/doc.taro.md
+++ b/src/packages/__VUE/swipe/doc.taro.md
@@ -6,7 +6,7 @@
 
 ## 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Swipe } from '@nutui/nutui-taro';
 
@@ -20,7 +20,7 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swipe>
     <nut-cell round-radius="0" title="左滑删除" />
@@ -37,7 +37,7 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swipe disabled>
     <nut-cell round-radius="0" title="禁止滑动" />
@@ -54,7 +54,7 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swipe>
     <template #left>
@@ -75,41 +75,26 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swipe ref="refSwipe" @open="open" @close="close">
-    <nut-cell title="异步打开关闭">
-      <template v-slot:link>
-        <nut-switch v-model="checked" @change="changSwitch" active-text="开" inactive-text="关" />
-      </template>
-    </nut-cell>
+  <nut-switch v-model="checked" @change="changSwitch" />
+  <nut-swipe ref="refSwipe">
+    <nut-cell title="异步打开关闭"></nut-cell>
     <template #right>
       <nut-button shape="square" style="height:100%" type="danger">删除</nut-button>
     </template>
   </nut-swipe>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const refSwipe = ref<HTMLElement>();
-      const checked = ref(false);
-      const changSwitch = (value: boolean) => {
-        if (value) {
-          refSwipe.value?.open('left');
-        } else {
-          refSwipe.value?.close();
-        }
-      };
-      const open = (obj: any) => {
-        console.log(obj);
-      };
-      const close = (obj: any) => {
-        console.log(obj);
-      };
-      return { checked, changSwitch, refSwipe, open, close };
-    }
-  };
+<script setup>
+const refSwipe = ref<HTMLElement>();
+const checked = ref(false);
+const changSwitch = (value) => {
+  if (value) {
+    refSwipe.value?.open('left');
+  } else {
+    refSwipe.value?.close();
+  }
+};
 </script>
 ```
 
@@ -119,7 +104,7 @@ app.use(Swipe);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swipe>
     <template #left>
@@ -136,19 +121,48 @@ app.use(Swipe);
     </template>
   </nut-swipe>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const number = ref(0);
-      return { number };
-    }
-  };
+<script setup>
+const number = ref(0);
 </script>
 ```
 
 :::
 
+### 使用 SwipeGroup 控制 Swipe 之间互斥
+
+此时各个 Swipe 的 name 为必填项。
+
+:::demo
+
+```vue
+<template>
+  <nut-swipe-group lock>
+    <nut-swipe name="11">
+      <nut-cell round-radius="0" title="左滑删除" />
+      <template #right>
+        <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+      </template>
+    </nut-swipe>
+    <nut-swipe name="22">
+      <nut-cell round-radius="0" title="左滑删除" />
+      <template #right>
+        <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+      </template>
+    </nut-swipe>
+    <div>
+      <nut-swipe name="33">
+        <nut-cell round-radius="0" title="左滑删除" />
+        <template #right>
+          <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+        </template>
+      </nut-swipe>
+    </div>
+  </nut-swipe-group>
+</template>
+```
+
+:::
+
 ## Swipe
 
 ### Props
@@ -177,9 +191,18 @@ app.use(Swipe);
 
 ### Methods
 
-通过 [ref](https://vuejs.org/guide/essentials/template-refs.html) 可以获取到 Swipe 实例并调用实例方法。
+通过 [ref](https://vuejs.org/guide/essentials/template-refs.html) 可以获取到 `Swipe` 实例并调用实例方法。
+
+| 方法名 | 说明                                            | 参数                                             |
+| ------ | ----------------------------------------------- | ------------------------------------------------ |
+| click  | 点击事件                                        | `name, position: 'left' \| 'content' \| 'right'` |
+| open   | 滑动单元格侧边栏，left 指向左滑，right 指向右滑 | `name, position: 'left' \| 'right'`              |
+| close  | 收起单元格侧边栏，同上                          | `name, position: 'left' \| 'right'`              |
+
+## SwipeGroup
+
+### Props
 
-| 方法名 | 说明                                            | 参数                                |
-| ------ | ----------------------------------------------- | ----------------------------------- |
-| open   | 滑动单元格侧边栏，left 指向左滑，right 指向右滑 | `name, position: 'left' \| 'right'` |
-| close  | 收起单元格侧边栏，同上                          | `name, position: 'left' \| 'right'` |
+| 参数         | 说明                                                                         | 类型    | 默认值  |
+| ------------ | ---------------------------------------------------------------------------- | ------- | ------- |
+| lock`v4.1.1` | 控制内部 Swipe 互斥，即滑动打开某一个 Swipe 时，触发其余 Swipe 的 close 方法 | boolean | `false` |
diff --git a/src/packages/__VUE/swipe/index.scss b/src/packages/__VUE/swipe/index.scss
index 81239a1cba..248f0416f0 100644
--- a/src/packages/__VUE/swipe/index.scss
+++ b/src/packages/__VUE/swipe/index.scss
@@ -1,6 +1,7 @@
 .nut-swipe {
   position: relative;
   display: block;
+  cursor: grab;
   transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
   &__left,
   &__right {
diff --git a/src/packages/__VUE/swipe/index.taro.vue b/src/packages/__VUE/swipe/index.taro.vue
index 895d97951d..7c9696efc3 100644
--- a/src/packages/__VUE/swipe/index.taro.vue
+++ b/src/packages/__VUE/swipe/index.taro.vue
@@ -1,31 +1,36 @@
 <template>
   <view
-    :class="classes"
+    class="nut-swipe"
     :style="touchStyle"
     @touchstart="onTouchStart"
     @touchmove="onTouchMove"
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
   >
-    <view class="nut-swipe__left" ref="leftRef" :id="'leftRef-' + refRandomId">
+    <view class="nut-swipe__left" ref="leftRef" :id="'leftRef-' + refRandomId" @click="onClick($event, 'left', true)">
       <slot name="left"></slot>
     </view>
 
-    <view class="nut-swipe__content">
+    <view class="nut-swipe__content" @click="onClick($event, 'content', lockClick)">
       <slot name="default"></slot>
     </view>
 
-    <view class="nut-swipe__right" ref="rightRef" :id="'rightRef-' + refRandomId">
+    <view
+      class="nut-swipe__right"
+      ref="rightRef"
+      :id="'rightRef-' + refRandomId"
+      @click="onClick($event, 'right', true)"
+    >
       <slot name="right"></slot>
     </view>
   </view>
 </template>
 <script lang="ts">
 import { useTouch } from '@/packages/utils/useTouch';
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, inject, watch, reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
-const { componentName, create } = createComponent('swipe');
+const { create } = createComponent('swipe');
 export type SwipePosition = 'left' | 'right' | '';
 export default create({
   props: {
@@ -46,22 +51,18 @@ export default create({
       default: false
     }
   },
-  emits: ['open', 'close'],
+  emits: ['open', 'close', 'click'],
 
   setup(props, { emit }) {
     const refRandomId = Math.random().toString(36).slice(-8);
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
 
     const leftRef = ref<HTMLElement>();
     const leftRefWidth = ref(0);
     const rightRef = ref<HTMLElement>();
     const rightRefWidth = ref(0);
 
+    const lockClick = ref(false);
+
     const initWidth = () => {
       useTaroRect(leftRef).then(
         (rect: any) => {
@@ -77,13 +78,24 @@ export default create({
       );
     };
 
+    const parent = inject('swipeGroup', null) as any;
+
+    watch(
+      () => parent?.name?.value,
+      (name) => {
+        if (props.name !== name && parent && parent.lock) {
+          close();
+        }
+      }
+    );
+
     onMounted(() => {
       setTimeout(() => {
         initWidth();
       }, 100);
     });
 
-    let opened: boolean = false;
+    const opened = ref(false);
     let position: SwipePosition = '';
     let oldPosition: SwipePosition = '';
 
@@ -93,7 +105,8 @@ export default create({
     });
 
     const open = (p: SwipePosition = '') => {
-      opened = true;
+      parent && parent.update(props.name);
+      opened.value = true;
       if (p) {
         state.offset = p === 'left' ? -rightRefWidth.value : leftRefWidth.value;
       }
@@ -105,11 +118,22 @@ export default create({
 
     const close = () => {
       state.offset = 0;
-      opened = false;
-      emit('close', {
-        name: props.name,
-        position
-      });
+      if (opened.value) {
+        opened.value = false;
+        emit('close', {
+          name: props.name,
+          position
+        });
+      }
+    };
+
+    const onClick = (e: Event, position: string, lock: boolean) => {
+      if (lock) {
+        e.stopPropagation();
+      } else {
+        close();
+      }
+      emit('click', position);
     };
 
     const touchStyle = computed(() => {
@@ -123,14 +147,14 @@ export default create({
       let offset = deltaX;
       switch (position) {
         case 'left':
-          if (opened && oldPosition === position) {
+          if (opened.value && oldPosition === position) {
             offset = -rightRefWidth.value;
           } else {
             offset = Math.abs(deltaX) > rightRefWidth.value ? -rightRefWidth.value : deltaX;
           }
           break;
         case 'right':
-          if (opened && oldPosition === position) {
+          if (opened.value && oldPosition === position) {
             offset = leftRefWidth.value;
           } else {
             offset = Math.abs(deltaX) > leftRefWidth.value ? leftRefWidth.value : deltaX;
@@ -146,10 +170,11 @@ export default create({
         if (props.disabled) return;
         touch.start(event);
       },
-      async onTouchMove(event: TouchEvent) {
+      onTouchMove(event: TouchEvent) {
         if (props.disabled) return;
         touch.move(event);
         if (touch.isHorizontal()) {
+          lockClick.value = true;
           state.moving = true;
           setoffset(touch.deltaX.value);
           if (props.touchMovePreventDefault) {
@@ -182,19 +207,23 @@ export default create({
               }
               break;
           }
+          setTimeout(() => {
+            lockClick.value = false;
+          }, 0);
         }
       }
     };
 
     return {
-      classes,
       touchStyle,
       ...touchMethods,
       leftRef,
       rightRef,
       refRandomId,
       open,
-      close
+      close,
+      onClick,
+      lockClick
     };
   }
 });
diff --git a/src/packages/__VUE/swipe/index.vue b/src/packages/__VUE/swipe/index.vue
index 39e532aabc..b745313043 100644
--- a/src/packages/__VUE/swipe/index.vue
+++ b/src/packages/__VUE/swipe/index.vue
@@ -1,31 +1,30 @@
 <template>
   <view
-    :class="classes"
+    class="nut-swipe"
     :style="touchStyle"
     @touchstart="onTouchStart"
     @touchmove="onTouchMove"
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
   >
-    <view class="nut-swipe__left" ref="leftRef">
+    <view class="nut-swipe__left" ref="leftRef" @click="onClick($event, 'left', true)">
       <slot name="left"></slot>
     </view>
 
-    <view class="nut-swipe__content">
+    <view class="nut-swipe__content" @click="onClick($event, 'content', lockClick)">
       <slot name="default"></slot>
     </view>
 
-    <view class="nut-swipe__right" ref="rightRef">
+    <view class="nut-swipe__right" ref="rightRef" @click="onClick($event, 'right', true)">
       <slot name="right"></slot>
     </view>
   </view>
 </template>
 <script lang="ts">
 import { useTouch } from '@/packages/utils/useTouch';
-import { computed, reactive, Ref, ref } from 'vue';
+import { computed, inject, reactive, watch, Ref, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('swipe');
-
+const { create } = createComponent('swipe');
 export type SwipePosition = 'left' | 'right' | '';
 export default create({
   props: {
@@ -46,20 +45,15 @@ export default create({
       default: false
     }
   },
-  emits: ['open', 'close'],
+  emits: ['open', 'close', 'click'],
 
   setup(props, { emit }) {
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const getRefWidth = (ref: Ref<HTMLElement | undefined>): number => {
-      return ref.value?.clientWidth || 0;
+      return ref.value?.getBoundingClientRect().width || 0;
     };
 
+    const lockClick = ref(false);
+
     const leftRef = ref<HTMLElement>(),
       leftRefWidth = computed(() => {
         return getRefWidth(leftRef);
@@ -69,7 +63,18 @@ export default create({
         return getRefWidth(rightRef);
       });
 
-    let opened: boolean = false;
+    const parent = inject('swipeGroup', null) as any;
+
+    watch(
+      () => parent?.name?.value,
+      (name) => {
+        if (props.name !== name && parent && parent.lock) {
+          close();
+        }
+      }
+    );
+
+    const opened = ref(false);
     let position: SwipePosition = '';
     let oldPosition: SwipePosition = '';
 
@@ -79,7 +84,8 @@ export default create({
     });
 
     const open = (p: SwipePosition = '') => {
-      opened = true;
+      parent && parent.update(props.name);
+      opened.value = true;
       if (p) {
         state.offset = p === 'left' ? -rightRefWidth.value : leftRefWidth.value;
       }
@@ -91,11 +97,22 @@ export default create({
 
     const close = () => {
       state.offset = 0;
-      opened = false;
-      emit('close', {
-        name: props.name,
-        position
-      });
+      if (opened.value) {
+        opened.value = false;
+        emit('close', {
+          name: props.name,
+          position
+        });
+      }
+    };
+
+    const onClick = (e: Event, position: string, lock: boolean) => {
+      if (lock) {
+        e.stopPropagation();
+      } else {
+        close();
+      }
+      emit('click', position);
     };
 
     const touchStyle = computed(() => {
@@ -109,14 +126,14 @@ export default create({
       let offset = deltaX;
       switch (position) {
         case 'left':
-          if (opened && oldPosition === position) {
+          if (opened.value && oldPosition === position) {
             offset = -rightRefWidth.value;
           } else {
             offset = Math.abs(deltaX) > rightRefWidth.value ? -rightRefWidth.value : deltaX;
           }
           break;
         case 'right':
-          if (opened && oldPosition === position) {
+          if (opened.value && oldPosition === position) {
             offset = leftRefWidth.value;
           } else {
             offset = Math.abs(deltaX) > leftRefWidth.value ? leftRefWidth.value : deltaX;
@@ -136,6 +153,7 @@ export default create({
         if (props.disabled) return;
         touch.move(event);
         if (touch.isHorizontal()) {
+          lockClick.value = true;
           state.moving = true;
           setoffset(touch.deltaX.value);
           if (props.touchMovePreventDefault) {
@@ -168,18 +186,22 @@ export default create({
               }
               break;
           }
+          setTimeout(() => {
+            lockClick.value = false;
+          }, 0);
         }
       }
     };
 
     return {
-      classes,
       touchStyle,
       ...touchMethods,
       leftRef,
       rightRef,
       open,
-      close
+      close,
+      onClick,
+      lockClick
     };
   }
 });
diff --git a/src/packages/__VUE/swipegroup/index.scss b/src/packages/__VUE/swipegroup/index.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/packages/__VUE/swipegroup/index.taro.vue b/src/packages/__VUE/swipegroup/index.taro.vue
new file mode 100644
index 0000000000..50160c89ae
--- /dev/null
+++ b/src/packages/__VUE/swipegroup/index.taro.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="nut-swipe-group" ref="swipeGroupRef">
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts">
+import { provide, ref } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { create } = createComponent('swipe-group');
+export default create({
+  props: {
+    lock: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const swipeGroupRef = ref(null);
+    const name = ref('');
+    const update = (n: string) => {
+      name.value = n;
+    };
+    provide('swipeGroup', {
+      update,
+      lock: props.lock,
+      name
+    });
+    return { swipeGroupRef };
+  }
+});
+</script>
diff --git a/src/packages/__VUE/swipegroup/index.vue b/src/packages/__VUE/swipegroup/index.vue
new file mode 100644
index 0000000000..50160c89ae
--- /dev/null
+++ b/src/packages/__VUE/swipegroup/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="nut-swipe-group" ref="swipeGroupRef">
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts">
+import { provide, ref } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { create } = createComponent('swipe-group');
+export default create({
+  props: {
+    lock: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const swipeGroupRef = ref(null);
+    const name = ref('');
+    const update = (n: string) => {
+      name.value = n;
+    };
+    provide('swipeGroup', {
+      update,
+      lock: props.lock,
+      name
+    });
+    return { swipeGroupRef };
+  }
+});
+</script>
diff --git a/src/packages/utils/unit.ts b/src/packages/utils/unit.ts
index 84e5f196ff..57cb3a1f8e 100644
--- a/src/packages/utils/unit.ts
+++ b/src/packages/utils/unit.ts
@@ -86,3 +86,10 @@ export function mockElementMethod(element: any, method: string): Mock {
   element.prototype[method] = fn;
   return fn;
 }
+
+// mock getBoundingClientRect
+export function mockGetBoundingClientRect(rect: any): () => void {
+  const spy = vi.spyOn(Element.prototype, 'getBoundingClientRect');
+  spy.mockReturnValue(rect);
+  return () => spy.mockRestore();
+}