feat(family): 新增 Modal 居中弹窗基座组件

This commit is contained in:
ozh 2026-09-09 14:56:01 +08:00
parent 223cd41fec
commit 288e681cca
2 changed files with 48 additions and 0 deletions

View File

@ -0,0 +1,23 @@
// 项目 z-index 现状:内容层 ≤1、抽屉/遮罩 10~11;弹窗基座取 100/101
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $color-mask;
z-index: 100;
}
.panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: $color-bg-white;
border-radius: $radius-lg;
padding: 48px 32px;
min-width: 600px;
z-index: 101;
box-shadow: $shadow-popup;
}

View File

@ -0,0 +1,25 @@
import { View } from '@tarojs/components'
import type { CSSProperties, ReactNode } from 'react'
import styles from './index.module.scss'
interface Props {
visible: boolean
onClose: () => void
children: ReactNode
width?: string // 默认 600px(编译为 600rpx)
}
export function Modal({ visible, onClose, children, width = '600px' }: Props) {
if (!visible) return null
const panelStyle: CSSProperties = { width }
return (
<>
<View className={styles.mask} onClick={onClose} />
<View className={styles.panel} style={panelStyle}>
{children}
</View>
</>
)
}