feat(family): 新增 Modal 居中弹窗基座组件
This commit is contained in:
parent
223cd41fec
commit
288e681cca
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue