✨ feat:菜单组件暴露ref方法出去

src/components/dropDown-item/index.tsx

@@ -3,7 +3,7 @@
  */
 
 import { View, Text } from '@tarojs/components'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from 'react'
 import styles from './index.module.scss'
 import Iconfont from '../iconfont/iconfont'
 import Popup from '../popup'
@@ -30,11 +30,19 @@ interface PropsType extends DropDownEvent {
   activeColor?: string
   showOverlay?: boolean
   customClassName?: string
-  customStyle?: React.CSSProperties
+  customStyle?: React.CSSProperties,
+  hasBottomBtn?: boolean //底部有按钮不允许点击蒙层关闭
 }
 
-export default (props: PropsType) => {
-  const { children, direction = 'down', title = '', value, options = [], change, activeColor, showOverlay = true } = props
+export default forwardRef((props: PropsType, ref) => {
+  const { children, direction = 'down', title = '', value, options = [], change, activeColor, showOverlay = true, hasBottomBtn = false } = props
+
+  useImperativeHandle(ref, () => ({
+    //暴露出方法给有需要的用
+    closePopup() {
+      setShowPopup(false)
+    }
+  }))
 
   const [showPopup, setShowPopup] = useState(false)
 
@@ -65,6 +73,7 @@ export default (props: PropsType) => {
   }
 
   const handleClosePopup = () => {
+    if (hasBottomBtn) return false
     setShowPopup(false)
   }
 
@@ -111,7 +120,7 @@ export default (props: PropsType) => {
         <Iconfont name={getIconName()} size={20} color={showPopup ? activeColor : '#7f7f7f'}></Iconfont>
       </View>
       <Popup
-        onClose={handleClosePopup}
+        onClose={() => handleClosePopup()}
         showOverLay={showOverlay}
         show={showPopup}
         showTitle={false}
@@ -123,4 +132,4 @@ export default (props: PropsType) => {
       </Popup>
     </View>
   )
-}
+})