fix(SwipeCell): compatible with desktop scenario (#5077)

src/swipe-cell/demo/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <demo-section>
-      <van-notice-bar>{{ $t('tips') }}</van-notice-bar>
       <demo-block :title="$t('basicUsage')">
         <van-swipe-cell>
           <template #left>
@@ -67,8 +66,7 @@ export default {
       collect: '收藏',
       title: '单元格',
       title2: '异步关闭',
-      confirm: '确定删除吗？',
-      tips: '建议在手机模式下浏览本示例'
+      confirm: '确定删除吗？'
     },
     'en-US': {
       select: 'Select',
@@ -76,8 +74,7 @@ export default {
       collect: 'Collect',
       title: 'Cell',
       title2: 'Async close',
-      confirm: 'Are you sure to delete?',
-      tips: 'Please try this demo in mobile mode'
+      confirm: 'Are you sure to delete?'
     }
   },
 

src/swipe-cell/index.js

@@ -91,7 +91,6 @@ export default createComponent({
         return;
       }
 
-      this.dragging = true;
       this.startOffset = this.offset;
       this.touchStart(event);
     },
@@ -104,6 +103,9 @@ export default createComponent({
       this.touchMove(event);
 
       if (this.direction === 'horizontal') {
+        this.dragging = true;
+        this.lockClick = true;
+
         const isPrevent = !this.opened || this.deltaX * this.startOffset < 0;
 
         if (isPrevent) {
@@ -121,9 +123,13 @@ export default createComponent({
 
       if (this.dragging) {
         this.toggle(this.offset > 0 ? 'left' : 'right');
-      }
+        this.dragging = false;
 
-      this.dragging = false;
+        // compatible with desktop scenario
+        setTimeout(() => {
+          this.lockClick = false;
+        }, 0);
+      }
     },
 
     toggle(direction) {
@@ -151,14 +157,12 @@ export default createComponent({
     onClick(position = 'outside') {
       this.$emit('click', position);
 
-      if (!this.offset) {
-        return;
-      }
-
-      if (this.onClose) {
-        this.onClose(position, this, { name: this.name });
-      } else {
-        this.swipeMove(0);
+      if (this.opened && !this.lockClick) {
+        if (this.onClose) {
+          this.onClose(position, this, { name: this.name });
+        } else {
+          this.swipeMove(0);
+        }
       }
     },
 

src/swipe-cell/test/__snapshots__/demo.spec.js.snap

@@ -3,11 +3,6 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div role="alert" class="van-notice-bar">
-      <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">建议在手机模式下浏览本示例</div>
-      </div>
-    </div>
     <div>
       <div class="van-swipe-cell">
         <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">

src/swipe-cell/test/index.spec.js

@@ -59,7 +59,7 @@ it('on-close prop', () => {
   wrapper.trigger('click');
   expect(position).toEqual(undefined);
 
-  wrapper.setData({ offset: 100 });
+  wrapper.vm.open('left');
   wrapper.trigger('click');
   expect(position).toEqual('cell');