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>