feat(swipe): 新增 SwipeGroup

jdf2e · Jul 19, 2023 · bdae082 · bdae082
1 parent a480e24
commit bdae082
Show file tree

Hide file tree

Showing 10 changed files with 226 additions and 51 deletions.
diff --git 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
@@ -52,6 +52,29 @@
         <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>
 

diff --git 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/demo.vue b/src/packages/__VUE/swipe/demo.vue
@@ -56,6 +56,29 @@
         <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" @click="onClick">
+        <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>
 
@@ -80,7 +103,8 @@ const initTranslate = () =>
       desc: '商品描述',
       delete: '删除',
       select: '选择',
-      collect: '收藏'
+      collect: '收藏',
+      group: '使用 SwipeGroup 控制 Swipe 之间互斥'
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -96,7 +120,8 @@ const initTranslate = () =>
       desc: 'product description',
       delete: 'Delelte',
       select: 'Select',
-      collect: 'Collect'
+      collect: 'Collect',
+      group: 'Use SwipeGroup to make swipe exclusive'
     }
   });
 export default defineComponent({

diff --git 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
@@ -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,13 +118,22 @@ export default create({
 
     const close = () => {
       state.offset = 0;
-      opened = false;
+      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(() => {
       return {
         transform: `translate3d(${state.offset}px, 0, 0)`
@@ -123,14 +145,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 +168,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 +205,23 @@ export default create({
               }
               break;
           }
+          setTimeout(() => {
+            lockClick.value = false;
+          }, 0);
         }
       }
     };
 
     return {
-      classes,
       touchStyle,
       ...touchMethods,
       leftRef,
       rightRef,
       refRandomId,
       open,
-      close
+      close,
+      onClick,
+      lockClick
     };
   }
 });