uniapp自定义组件无法覆盖头部导航栏以及底部tabBar问题

<template>
	<view class="mask" v-show="showPopup" @click="showMask">
		<view class="popup_box" @click.stop="noClose">
			<view class="init_box">
				<view class="init">
					<view class="title">实名认证</view>
					<view class="desc">您还未认证信息，请尽快完成认证</view>
					<view class="btn">马上认证</view>
				</view>
				<view class="close_box"><view class="close" @click="closeMask"></view></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showPopup: this.show,
			viewTop: null, // 创建原生View控件
			viewBottom: null // 创建原生View控件
		};
	},
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	mounted() {
		// #ifdef APP-PLUS
		// 原生控件对象可用于在屏幕上绘制图片或文本内容 参考地址 https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View
		const res = uni.getSystemInfoSync();
		// 上蒙版
		this.viewTop = new plus.nativeObj.View('maskTop', {
			top: '0px',
			left: '0px',
			height: `${res.statusBarHeight + 44}`,
			width: '100%',
			backgroundColor: 'rgba(64, 64, 64, 0.6)'
		});
		// 下蒙版
		this.viewBottom = new plus.nativeObj.View('maskBott', {
			bottom: '0px',
			left: '0px',
			height: `${res.screenHeight - res.windowHeight - res.statusBarHeight - 44}`,
			width: '100%',
			backgroundColor: 'rgba(64, 64, 64, 0.6)'
		});
		this.viewTop.show();
		this.viewBottom.show();
		// #endif
	},
	watch: {
		show: {
			immediate: true,
			handler(val) {
				this.showPopup = val;
			}
		}
	},
	onLoad() {},
	methods: {
		noClose() {
			// 不进行任何操作
		},
		showMask() {
			// this.$emit('showMask');
		},
		closeMask() {
			// #ifdef APP-PLUS
			setTimeout(() => {
				// 使用延时为了与中间部分同步
				this.viewTop.hide();
				this.viewBottom.hide();
			}, 20);
			// #endif
			this.showPopup = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.mask {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(64, 64, 64, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;	/*h5端底部tabbar z-index为998 */


	.popup_box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		.init_box {
			height: 100%;
			overflow: scroll;
			.init {
				width: 544rpx;
				background-color: #ffffff;
				text-align: center;
				padding-top: 76rpx;
				padding-bottom: 64rpx;
				.title {
					font-size: 36rpx;
					font-weight: bold;
					color: #333333;
				}
				.desc {
					margin-top: 24rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					letter-spacing: 3rpx;
				}
				.btn {
					width: 368rpx;
					height: 72rpx;
					line-height: 72rpx;
					background: linear-gradient(180deg, #3178ff 0%, #6499ff 100%);
					font-size: 28rpx;
					font-weight: 400;
					color: #ffffff;
					margin: 0 auto;
					margin-top: 60rpx;
					letter-spacing: 10rpx;
					border-radius: 1800rpx;
				}
			}
			.close_box {
				width: 72rpx;
				margin: 0 auto;
				.close {
					width: 72rpx;
					height: 72rpx;
					background: #FFFFFF;
					margin-top: 48rpx;
				}
			}
		}
	}
}
</style>

以上是组件全部代码

挑选比较重要讲解：

主要是APP端状态栏和导航栏以及底部tanBar未被蒙版覆盖，主要解决这个问题

const res = uni.getSystemInfoSync(); // 获取设备信息

res.statusBarHeight // 状态栏高度

res.screenHeight // 屏幕高度 = 原生NavigationBar高度（含状态栏高度）+ 可使用窗口高度 + 原生TabBar高度

res.windowHeight //可使用窗口高度 （不包含NavigationBar和TabBar的高度）

44 为默认导航条高度

注：只有小程序能够获得导航栏高度，app、H5是没有的，所以高度这两端的导航栏高度是设屎的44px

new plus.nativeObj.View() 使用  参考：HTML5+ API Referencehttps://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View
        // 上蒙版
        this.viewTop = new plus.nativeObj.View('maskTop', {
            top: '0px',
            left: '0px',
            height: `${res.statusBarHeight + 44}`,
            width: '100%',
            backgroundColor: 'rgba(64, 64, 64, 0.6)'
        });

// 下蒙版
        this.viewBottom = new plus.nativeObj.View('maskBott', {
            bottom: '0px',
            left: '0px',
            height: `${res.screenHeight - res.windowHeight - res.statusBarHeight - 44}`,
            width: '100%',
            backgroundColor: 'rgba(64, 64, 64, 0.6)'
        });

this.viewTop.show();
        this.viewBottom.show();

// #ifdef APP-PLUS

只在APP端运行 参考：uni-app官网https://uniapp.dcloud.io/platform

// #endif