fix(swipe-cell): right slot event cannot be triggered (#1245) (#1266)

* fix(swipe-cell): right slot event cannot be triggered fix #1245 * test: update snapshots --------- Co-authored-by: anlyyao <[email protected]>
Tencent · Mar 21, 2024 · a97205f · a97205f
1 parent 8af0f57
commit a97205f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 23 deletions.
diff --git a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
@@ -89,7 +89,7 @@ exports[`SwipeCell > SwipeCell doubleVue demo works fine 1`] = `
             style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
           />
           <div
-            style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+            style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
           >
             <!--v-if-->
           </div>
@@ -202,7 +202,7 @@ exports[`SwipeCell > SwipeCell eventVue demo works fine 1`] = `
             style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
           />
           <div
-            style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+            style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
           >
             <!--v-if-->
           </div>
@@ -338,7 +338,7 @@ exports[`SwipeCell > SwipeCell iconVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -448,7 +448,7 @@ exports[`SwipeCell > SwipeCell iconVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -572,7 +572,7 @@ exports[`SwipeCell > SwipeCell iconVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -673,7 +673,7 @@ exports[`SwipeCell > SwipeCell leftVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -757,7 +757,7 @@ exports[`SwipeCell > SwipeCell leftVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -854,7 +854,7 @@ exports[`SwipeCell > SwipeCell leftVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -962,7 +962,7 @@ exports[`SwipeCell > SwipeCell leftVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1073,7 +1073,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1157,7 +1157,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1254,7 +1254,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1362,7 +1362,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1451,7 +1451,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1549,7 +1549,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1679,7 +1679,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1789,7 +1789,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1913,7 +1913,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -2024,7 +2024,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -2116,7 +2116,7 @@ exports[`SwipeCell > SwipeCell rightVue demo works fine 1`] = `
             style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
           />
           <div
-            style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+            style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
           >
             <!--v-if-->
           </div>

diff --git a/src/swipe-cell/useSureConfirm.ts b/src/swipe-cell/useSureConfirm.ts
@@ -41,7 +41,7 @@ export function useSureConfirm(instance: ComponentInternalInstance | null, initD
       height: '100%',
       backgroundColor: 'rgba(0,0,0,0)',
       transition: closedSure.value ? 'none' : 'background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1)',
-      transform: `translate3d(${-initData.rightWidth}px, 0, 0)`,
+      transform: `translate3d(${initData.rightWidth}px, 0, 0)`,
       pointerEvents: 'none',
     } as CSSProperties;
 
@@ -85,9 +85,9 @@ export function useSureConfirm(instance: ComponentInternalInstance | null, initD
     } as CSSProperties;
 
     if (showSureRight.value) {
-      style.transform = `translate3d(${-initData.rightWidth}px, 0, 0)`;
-    } else {
       style.transform = `translate3d(0, 0, 0)`;
+    } else {
+      style.transform = `translate3d(${initData.rightWidth}px, 0, 0)`;
     }
     return style;
   });