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