xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat(下拉菜单): 下拉菜单组件50%

Browse Source
This commit is contained in:
xuan
2022-09-28 19:15:47 +08:00
parent d00604b3f0
commit 47a13a4365
8 changed files with 241 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/popup/index.module.scss
+41 -37
View File
@@ -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
+62 -22
View File
@@ -3,20 +3,39 @@ import style from './index.module.scss'
import classnames from 'classnames'
import { memo, ReactNode, useEffect, useMemo, useRef } 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 //关闭事件
children?: ReactNode //插槽内容
// IconButton?: ReactNode, //
showIconButton?: false | true //是否显示关闭按钮
position?: 'bottom' | 'top' | 'right' //弹出位置
animationEnd?: () => void //弹出动画结束
}
export interface Params extends PopupEvent {
title?: string //标题
show?: boolean //显示显示弹窗
showTitle?: boolean //是否显示标题
children?: ReactNode //插槽内容
// IconButton?: ReactNode, //
showIconButton?: boolean //是否显示关闭按钮
position?: 'bottom' | 'top' | 'right' //弹出位置
customStyle?: React.CSSProperties
overlayStyle?: React.CSSProperties
safeAreaInsetBottom?: boolean // 是否为iphoneX提供小黑条适配
}
export default memo(
({ title = '标题', show = false, showTitle = true, onClose, showIconButton = false, children, position = 'bottom', animationEnd }: Params) => {
({
title = '标题',
show = false,
showTitle = true,
onClose,
showIconButton = false,
children,
position = 'bottom',
animationEnd,
customStyle,
safeAreaInsetBottom = true,
overlayStyle,
}: Params) => {
const animationTime = useRef<any>(null)
useEffect(() => {
if (show) {
@@ -34,24 +53,45 @@ export default memo(
}
}, [])
// const getStyle = () => {
// if (position === 'bottom' || position === 'top') {
// const query = Taro.createSelectorQuery()
// query
// .select('#drawerContainerContext')
// .fields(
// { dataset: true, size: true, scrollOffset: true, properties: ['scrollX', 'scrollY'], computedStyle: ['margin', 'backgroundColor'], context: true },
// function(res) {
// console.log(res) // #drawerContainerContext 节点的上边界坐标
// },
// )
// .exec()
// return {}
// // return {
// // left: '0px',
// // }
// }
// return {}
// }
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
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 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
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 id='drawerContainerContext' className={style.drawer_container_context}>
{children}
</View>
{safeAreaInsetBottom && <View className='common_safe_area_y'></View>}
</View>
</View>
</View>