vue3+ts在页面增加一层遮罩页

ts我也是在摸石头过河，遮罩已经实现（不可在带滚动情况下使用），ts验证代码没报错
效果图


父组件代码，截图，只用到圈红的代码

父组件用到的代码

//使用组件
<homeShading ref="childRef"></homeShading>
//导入组件
import homeShading from "./07homeShading.vue"
//依赖ref
import { ref } from "vue";
//这个不能省
const childRef=ref();
//父组件调用方法
const showShadingFun = (e: boolean) => {
    console.log(e,childRef);
   //把需要传的参传到子组件方法
    childRef.value.changeShowShading(e);
}

这是子组件完整代码 改改组件名可以直接套用了

<template>
    <!-- 使用相对定位，我的理解是需要使用两个div -->
    <div class="mian-box" v-if="shadingValue.bl">
        <div class="shading">
            <!-- 这为实现按钮的定位 -->
            <div class="button-position">
                <div class="button-location">
                    <el-button type="primary" round plain size="small" @click="changeShowShading(false)">关闭</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { defineExpose, ref } from "vue";
// 声明显示隐藏参数
let shadingValue = ref({ bl: false })
// 定义打开关闭方法
const changeShowShading = (e: boolean) => {
    console.log(e);
    //e是在父组件传过来的布尔值，或是“关闭按钮”传的布尔值
    shadingValue.value.bl = e
}
// 暴露方法出去
defineExpose({
    changeShowShading
})
</script>
<style scoped lang="less">
.mian-box {
    // 定位遮照层
    position: relative;
    z-index: 99;

    .shading {
        position: absolute;
        top: 32px;
        width: 100%;
        height: calc(95.6vh);
        background: #47b6de;
    }

    .button-position {
        // 定位按钮
        position: relative;

        .button-location {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
}
</style>