✨ feat:解决冲突合并

src/components/popup/index.module.scss

@@ -1,58 +1,62 @@
 $am-ms: 200ms;
+
+.drawer_mask {
+  flex: 1 1 auto;
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 1011;
+  opacity: 0;
+  transition: opacity $am-ms ease-in;
+  &_active {
+    opacity: 1;
+  }
+}
+
 .drawer_main {
   .drawer {
     position: fixed;
-  left: 0;
-  top: 0;
+    left: 0;
+    top: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     width: 100%;
-    height: 100vh;
+    height: 100%;
     margin: 0 auto;
     z-index: 1000;
     visibility: hidden;
     transition: visibility $am-ms ease-in-out;
-    .drawer_mask {
+
+    .drawer_container {
       display: flex;
+      flex-direction: column;
       position: absolute;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      background: rgba(0, 0, 0, 0.6);
-      z-index: 1011;
-      opacity: 0;
-      transition: opacity $am-ms ease-in;
-      .drawer_container {
+      background-color: #fff;
+      z-index: 1012;
+      transition: transform $am-ms ease-in-out;
+      .drawer_container_title {
         display: flex;
-        flex-direction: column;
-        position: absolute;
-        background-color: #fff;
-        z-index: 1012;
-        transition: transform $am-ms ease-in-out;
-        .drawer_container_title {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          height: 80px;
-          font-size: 29px;
-          color: #000000;
-          padding-top: 10px;
-        }
-        .common_close_btn_icon {
-          position: absolute;
-          top: 10px;
-          left: 10px;
-        }
+        align-items: center;
+        justify-content: center;
+        height: 80px;
+        font-size: 29px;
+        color: #000000;
+        padding-top: 10px;
       }
-      .drawer_container_active {
-        transform: translate3d(0, 0, 0);
+      .common_close_btn_icon {
+        position: absolute;
+        top: 10px;
+        left: 10px;
       }
     }
-    .drawer_mask_active {
-      opacity: 1;
+    .drawer_container_active {
+      transform: translate3d(0, 0, 0);
     }
   }
   .drawer_active {
@@ -80,7 +84,7 @@ $am-ms: 200ms;
   .drawer_container_right {
     bottom: 0;
     right: 0;
-    height: 100vh;
+    height: 100%;
     min-width: 300px;
     border-radius: 20px 0 0 20px;
     transform: translate3d(100%, 0, 0);

src/components/popup/index.tsx

@@ -3,21 +3,41 @@ import style from './index.module.scss'
 import classnames from 'classnames'
 import { memo, ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import CloseBtnIcon from '@/components/closeBtn'
+import Taro from '@tarojs/taro'
 
-export interface Params {
-  title?: string //标题
-  show?: false | true //显示显示弹窗
-  showTitle?: false | true //是否显示标题
+export interface PopupEvent {
   onClose?: () => void //关闭事件
+  animationEnd?: () => void //弹出动画结束
+}
+
+export interface Params extends PopupEvent {
+  title?: string //标题
+  show?: boolean //显示显示弹窗
+  showTitle?: boolean //是否显示标题
+  isFixed?: boolean //二次弹窗触发
   children?: ReactNode //插槽内容
   // IconButton?: ReactNode, //
-  showIconButton?: false | true //是否显示关闭按钮
+  showIconButton?: boolean //是否显示关闭按钮
   position?: 'bottom' | 'top' | 'right' //弹出位置
-  animationEnd?: () => void, //弹出动画结束
-  isFixed?: boolean //二次弹窗触发
+  customStyle?: React.CSSProperties
+  overlayStyle?: React.CSSProperties
+  safeAreaInsetBottom?: boolean   // 是否为iphoneX提供小黑条适配
 }
 export default memo(
-  ({ title = '标题', show = false, showTitle = true, isFixed = false, onClose, showIconButton = false, children, position = 'bottom', animationEnd }: Params) => {
+  ({
+    title = '标题',
+    show = false,
+    showTitle = true,
+    onClose,
+    isFixed = false,
+    showIconButton = false,
+    children,
+    position = 'bottom',
+    animationEnd,
+    customStyle,
+    safeAreaInsetBottom = true,
+    overlayStyle,
+  }: Params) => {
     const animationTime = useRef<any>(null)
     useEffect(() => {
       if (show) {
@@ -36,25 +56,26 @@ export default memo(
       }
     }, [])
 
-    const [ShowContext, setShowContext] = useState(false)
     return (
       <>
         <View className={style.drawer_main}>
-          <View catchMove={true} className={`${style.drawer} ${show ? style.drawer_active : ''}`}>
-            <View className={classnames(style.drawer_mask, { [style.drawer_mask_active]: show })} onClick={() => onClose?.()}>
-              <View
-                style={{ position: `${isFixed == true ? 'fixed' : 'absolute'}`, }}
-                className={classnames(style.drawer_container, style['drawer_container_' + position], { [style.drawer_container_active]: show })}
-                onClick={(e) => e.stopPropagation()}>
-                {showTitle && <View className={style.drawer_container_title}>{title}</View>}
-                {showIconButton && (
-                  <View className={style.common_close_btn_icon}>
-                    <CloseBtnIcon onClose={() => onClose?.()} />
-                  </View>
-                )}
-                <View className={style.drawer_container_context}>{children}</View>
-                <View className='common_safe_area_y'></View>
+          <View catchMove={true} className={classnames(style.drawer, show ? style.drawer_active : '')} style={customStyle}>
+            <View className={classnames(style.drawer_mask, { [style.drawer_mask_active]: show })} onClick={onClose} style={overlayStyle}></View>
+            <View
+              style={{ position: `${isFixed == true ? 'fixed' : 'absolute'}`, }}
+              className={classnames(style.drawer_container, style['drawer_container_' + position], { [style.drawer_container_active]: show })}
+              onClick={e => e.stopPropagation()}>
+              {showTitle && <View className={style.drawer_container_title}>{title}</View>}
+              {showIconButton && (
+                <View className={style.common_close_btn_icon}>
+                  <CloseBtnIcon onClose={onClose} />
+                </View>
+              )}
+
+              <View id='drawerContainerContext' className={style.drawer_container_context}>
+                {children}
               </View>
+              {safeAreaInsetBottom && <View className='common_safe_area_y'></View>}
             </View>
           </View>
         </View>