antd mobile 的 Modal 添加自定义属性

antd mobile 的 modal 距离顶部尺寸自定义，antd mobile 没有配置距离顶部距离的属性

wrap 层添加 style

Modal 有个隐藏属性 wrapProps，可以通过 wrapProps 手动设置 Modal wrap 的 style，在 scss 里面接收到传递过去的 top 值，进行使用。

mask 遮罩层

遮罩层并没有相关的属性去进行设置，所以通过 js 的方式，手动添加上。 在 useLayoutEffect 属性 DOM 结构更新后、渲染前，通过 js 获取 mask 属性，然后给他添加 style 属性，同样在 css 里面接收 top 值，进行使用。

import React, { useLayoutEffect } from 'react';  
import { Modal } from 'antd-mobile';  
import './index.scss';  
  
const Index = (props) => {  
    const { children, top = 45 } = props;  
    // todo useLayoutEffect 的渲染 dom 之前执行  
    useLayoutEffect(() => {  
        // todo 获取 mask 属性  
        const mask = document.getElementsByClassName('top-show-mask');  
        // todo 获取到 mask 的时候，添加 style 属性，设置 mask 距离顶部的距离  
        if (mask[0]) mask[0].setAttribute('style', `--top: ${top}px`);  
    });  
    return (  
        <Modal  
            popup  
            prefixCls="top-show"  
            {...props}  
            maskClosable  
            className="ceshi"  
            animationType="slide-down"  
            wrapProps={{ style: { '--top': top && `${top}px` } }} // todo 设置弹窗框距离顶部的距离  
            >  
            {children}  
        </Modal>  
    );  
};  
  
export default Index;

:global {  
    // todo 默认距离顶部的距离
    $defaultTop: 45px;  

    .top-show-mask {  
        // todo 获取 页面元素 传递过来的 top 值
        $top: var(--top, $defaultTop);  
        position: fixed;  
        top: $top;  
        right: 0;  
        left: 0;  
        bottom: 0;  
        height: 100%;  
        z-index: 999;  
        background-color: #00000066;  
    }  


    .top-show-wrap {  
        $top: var(--top, $defaultTop);  
        position: fixed;  
        overflow: auto;  
        top: $top;  
        right: 0;  
        bottom: 0;  
        left: 0;  
        height: 100%;  
        z-index: 999;  
        -webkit-overflow-scrolling: touch;  
        outline: 0;  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        transform: translateZ(1px);  
    }  
  
}