feat(rn): tip 支持点击rn点击tip区域外关闭

QiuShuiBai · QiuShuiBai · commit 1645b9497e32 · 2025-10-21T16:47:14.000+08:00
diff --git a/packages/mpx-cube-ui/lib/components/switch/index.mpx b/packages/mpx-cube-ui/lib/components/switch/index.mpx
@@ -2,13 +2,13 @@
   <view
     wx:class="{{ switchClass }}"
     bindtap="toggleSwitch"
-    animation="{{ switchAnimationData }}"
+    animation@_ios|_android="{{ switchAnimationData }}"
     wx:style="{{ swithBGClass }}"
   >
     <view
       class="cube-switch-handle"
       wx:class="{{ {'cube-switch-handle-on': isOn }}}"
-      animation="{{ switchHandleAnimationData }}"
+      animation@_ios|_android="{{ switchHandleAnimationData }}"
     />
   </view>
 </template>
diff --git a/packages/mpx-cube-ui/lib/components/tip/css.rn.styl b/packages/mpx-cube-ui/lib/components/tip/css.rn.styl
@@ -7,13 +7,12 @@
   z-index $var(tip-z-index)
   display flex
   max-height $var(tip-max-height)
-  border-radius $var(tip-border-radius)
-  background-color $var(tip-bgc)
   font-size $var(font-size-xs)
   color $var(tip-color)
   transform scale(0)
 .cube-tip-angle-wapper
   position absolute
+  z-index: 2
 .cube-tip-angle
   border-top-width: 0
   border-right-width: 6px
@@ -55,18 +54,19 @@
   transform rotate(90deg)
 .cube-tip-line-wrapper
   position absolute
+  z-index: 3
   right $var(tip-close-right)
   top $var(tip-close-top)
   width $var(tip-close-width)
   height $var(tip-close-height)
-  transform scale(1.1)
+  transform scale(1.6)
 .cube-tip-line
   position absolute
   top: 50%
   left: 50%
   width $var(tip-close-width)
   height $var(tip-close-height)
-  transform: translate(-50%, -50%), rotate(45deg)
+  transform: translate(-50%, -50%), rotate(45deg), scale(0.625)
   background-color: #fff
 .cube-tip-line-horizontal
   width $var(font-size-lg)
@@ -75,9 +75,20 @@
   width: 2px
   height $var(font-size-lg)
 
-
+.cube-tip-popup
+  position: absolute
+  z-index: 1
+  width: 2000vw
+  height: 2000vh
+  left: -1000vw
+  top: -1000vh
+  opacity: 0
+  pointer-events: box-only
 .cube-tip-content
+  z-index: 2
   padding-all($var(tip-padding-top), $var(tip-padding-right), $var(tip-padding-bottom), $var(tip-padding-left))
+  background-color $var(tip-bgc)
+  border-radius $var(tip-border-radius)
   min-height $var(tip-content-min-height)
   line-height $var(tip-content-line-height)
   overflow hidden
diff --git a/packages/mpx-cube-ui/lib/components/tip/index.mpx b/packages/mpx-cube-ui/lib/components/tip/index.mpx
@@ -2,11 +2,10 @@
   <view
     wx:class="{{ rootClass }}"
     wx:style="{{ customStyle }}"
-    bind:tap="onClick"
     animation@_ios|_android="{{ tipAnimationData }}"
   >
-    <view class="cube-tip-angle-wapper" wx:class="{{ angleWrapperClass }}" wx:style="{{ angStyle }}">
-      <view class="cube-tip-angle" wx:class="{{ angleClass }}"></view>
+    <view class="cube-tip-angle-wapper" wx:class@_ios|_android="{{ angleWrapperClass }}" wx:style="{{ angStyle }}">
+      <view class="cube-tip-angle" wx:class@_ios|_android="{{ angleClass }}"></view>
     </view>
     <view
       @_ios|_android
@@ -27,7 +26,14 @@
       type="close"
       catchtap="onClose"
     />
-    <view class="cube-tip-content" wx:class="{{ { 'cube-tip-content-without-close': !showClose } }}">
+    <view
+      @_ios|_android
+      class="cube-tip-popup"
+      wx:show="{{ closeOnClickOutside && isVisible }}"
+      bind:tap="onClose"
+    >
+    </view>
+    <view class="cube-tip-content" bind:tap="onClick" wx:class="{{ { 'cube-tip-content-without-close': !showClose } }}">
       <!-- 默认插槽 -->
       <slot />
     </view>
diff --git a/packages/mpx-cube-ui/lib/components/tip/tip.js b/packages/mpx-cube-ui/lib/components/tip/tip.js
@@ -38,6 +38,10 @@ createComponent({
         showClose: {
             type: Boolean,
             value: true
+        },
+        closeOnClickOutside: {
+            type: Boolean,
+            value: false
         }
     },
     data: {
diff --git a/packages/mpx-cube-ui/package.json b/packages/mpx-cube-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/mpx-cube-ui",
-  "version": "1.3.12-beta.3",
+  "version": "1.3.12-beta.7",
   "description": "mpx components library",
   "author": "xiaolei <xiaolei@didichuxing.com>",
   "publishConfig": {
diff --git a/packages/mpx-cube-ui/src/components/tip/css.rn.styl b/packages/mpx-cube-ui/src/components/tip/css.rn.styl
@@ -7,13 +7,12 @@
   z-index $var(tip-z-index)
   display flex
   max-height $var(tip-max-height)
-  border-radius $var(tip-border-radius)
-  background-color $var(tip-bgc)
   font-size $var(font-size-xs)
   color $var(tip-color)
   transform scale(0)
 .cube-tip-angle-wapper
   position absolute
+  z-index: 2
 .cube-tip-angle
   border-top-width: 0
   border-right-width: 6px
@@ -55,18 +54,19 @@
   transform rotate(90deg)
 .cube-tip-line-wrapper
   position absolute
+  z-index: 3
   right $var(tip-close-right)
   top $var(tip-close-top)
   width $var(tip-close-width)
   height $var(tip-close-height)
-  transform scale(1.1)
+  transform scale(1.6)
 .cube-tip-line
   position absolute
   top: 50%
   left: 50%
   width $var(tip-close-width)
   height $var(tip-close-height)
-  transform: translate(-50%, -50%), rotate(45deg)
+  transform: translate(-50%, -50%), rotate(45deg), scale(0.625)
   background-color: #fff
 .cube-tip-line-horizontal
   width $var(font-size-lg)
@@ -75,9 +75,20 @@
   width: 2px
   height $var(font-size-lg)
 
-
+.cube-tip-popup
+  position: absolute
+  z-index: 1
+  width: 2000vw
+  height: 2000vh
+  left: -1000vw
+  top: -1000vh
+  opacity: 0
+  pointer-events: box-only
 .cube-tip-content
+  z-index: 2
   padding-all($var(tip-padding-top), $var(tip-padding-right), $var(tip-padding-bottom), $var(tip-padding-left))
+  background-color $var(tip-bgc)
+  border-radius $var(tip-border-radius)
   min-height $var(tip-content-min-height)
   line-height $var(tip-content-line-height)
   overflow hidden
diff --git a/packages/mpx-cube-ui/src/components/tip/index.mpx b/packages/mpx-cube-ui/src/components/tip/index.mpx
@@ -2,7 +2,6 @@
   <view
     wx:class="{{ rootClass }}"
     wx:style="{{ customStyle }}"
-    bind:tap="onClick"
     animation@_ios|_android="{{ tipAnimationData }}"
   >
     <view class="cube-tip-angle-wapper" wx:class@_ios|_android="{{ angleWrapperClass }}" wx:style="{{ angStyle }}">
@@ -27,7 +26,14 @@
       type="close"
       catchtap="onClose"
     />
-    <view class="cube-tip-content" wx:class@_ios|_android="{{ { 'cube-tip-content-without-close': !showClose } }}">
+    <view
+      @_ios|_android
+      class="cube-tip-popup"
+      wx:show="{{ closeOnClickOutside && isVisible }}"
+      bind:tap="onClose"
+    >
+    </view>
+    <view class="cube-tip-content" bind:tap="onClick" wx:class="{{ { 'cube-tip-content-without-close': !showClose } }}">
       <!-- 默认插槽 -->
       <slot />
     </view>
diff --git a/packages/mpx-cube-ui/src/components/tip/tip.ts b/packages/mpx-cube-ui/src/components/tip/tip.ts
@@ -40,6 +40,10 @@ createComponent({
     showClose: {
       type: Boolean,
       value: true
+    },
+    closeOnClickOutside: {
+      type: Boolean,
+      value: false
     }
   },
   data: {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@mpxjs/mpx-cube-ui",`
`3`		`- "version": "1.3.12-beta.3",`
	`3`	`+ "version": "1.3.12-beta.7",`
`4`	`4`	`"description": "mpx components library",`
`5`	`5`	`"author": "xiaolei <[email protected]>",`
`6`	`6`	`"publishConfig": {`