抽屉组件如何设置挂载节点

场景描述

抽屉按具体的需求设置遮罩的区域

实现思路

使用抽屉组件的挂载节点属性设置，默认的显示抽屉时是整个门户页面都遮罩，如下：

实现步骤

1.设置遮罩的区域为当前页面

(1).在页面组件上设置定位方式为相对定位(relative),设置页面撑满为是，在样式上添加x-full样式

(2).在抽屉组件上设置定位方式为绝对定位(absolute)

运行效果如下：

2.设置遮罩的区域为当前页面中的某个区块

(1).区块组件上设置固定高度，设置定位方式为相对定位(relative)，并且在区块上添加了一个样式drawerParent，便于获取此容器

(2).在抽屉组件上设置定位方式为绝对定位(absolute),设置挂载节点函数

在函数中返回区块容器，如下

    let drawer1GetContainerFn = () => {
        return document.querySelector(".drawerParent ");
    }

运行效果如下：