uniapp开发小程序中因uchart的canvas层级过高遮盖uni-datetime-picker组件的解决办法

bug描述

页面需要展示一个环形图，可以按时间段筛选数据，所以我用了uchart和uni-datetime-picker组件。

但uchart用到了canvas，其层级过高，当实机运行小程序时会遮盖弹出的uni-datetime-picker组件

解决办法

当uni-datetime-picker组件弹出遮罩时，把canvas移到用户视野之外。

uni-datetime-picker组件本质就是普通的vue组件，进入uni-modules寻找uni-datetime-picker组件的代码，通过监听控制uni-datetime-picker组件弹出收回的属性控制canvas是否移出用户视野之外。
几经查找，选择监控uni-datetime-picker组件下的calendar组件的show属性，因为实验监控uni-datetime-picker的popup属性无法实现效果，所以找更靠谱的孙组件calendar，又因为我的uni-app版本不支持 $listen，所以被迫让中间的uni-datetime-picker中转 $emit，最终最上层自己写的组件就可以监听uni-datetime-picker的显示隐藏了。

在calendar组件里找到的控制台历显示的show属性

watch: {
			// 自己添加的控制爷组件canvas显隐的监视方法，以解决canvas层级过高问题
			show: {
				handler(newVal, oldVal) {
					if (this.show) {
						this.$emit('closeCanvas');
					}else {
						this.$emit('showCanvas');
					}
				}
			},
		}

在uni-datetime-picker组件里找到每一个用到calendar组件的地方加上自定义事件（closeCanvas，showCanvas）监听

<calendar ref="pcSingle" :showMonth="false"
	:start-date="caleRange.startDate" :end-date="caleRange.endDate" :date="defSingleDate"
	@change="singleChange" style="padding: 0 8px;" @closeCanvas="closeCanvas" @showCanvas="showCanvas"/>

<view class="popup-x-body">
	<calendar ref="left" :showMonth="false"
		:start-date="caleRange.startDate" :end-date="caleRange.endDate" :range="true"
		@change="leftChange" :pleStatus="endMultipleStatus" @firstEnterCale="updateRightCale"
		@monthSwitch="leftMonthSwitch" style="padding: 0 8px;" @closeCanvas="closeCanvas" @showCanvas="showCanvas"/>
	<calendar ref="right" :showMonth="false"
		:start-date="caleRange.startDate" :end-date="caleRange.endDate" :range="true"
		@change="rightChange" :pleStatus="startMultipleStatus" @firstEnterCale="updateLeftCale"
		@monthSwitch="rightMonthSwitch" style="padding: 0 8px;border-left: 1px solid #F1F1F1;" @closeCanvas="closeCanvas" @showCanvas="showCanvas"/>
</view>

<calendar v-show="isPhone" ref="mobile" :clearDate="false" :date="defSingleDate" :defTime="reactMobDefTime"
	:start-date="caleRange.startDate" :end-date="caleRange.endDate" :selectableTimes="mobSelectableTime"
	:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :typeHasTime="hasTime" :insert="false"
	:hideSecond="hideSecond" @confirm="mobileChange" @closeCanvas="closeCanvas" @showCanvas="showCanvas"/>

uni-datetime-picker方法写上中转监听方法

// 监听calendar的触发，然后再向上传递
methods: {
	closeCanvas() {
		this.$emit('closeCanvas');
	},
	showCanvas() {
		this.$emit('showCanvas');
	}
}

在自己的组件用到uni-datetime-picker的地方也加上监听

<view class="datetime-picker-wrap">
	<uni-datetime-picker v-model="dateRange" type="daterange" rangeSeparator="到"
		@change="dateRangeChange" @closeCanvas="closeCanvas" @showCanvas="showCanvas"/>
</view>

监听到组件的显示隐藏就好办了，写一个让canvas水平移出外面的样式，uni-datetime-picker组件弹出就加上样式，收回就去掉样式即可。

动态加上移出视野的样式代码

<view class="card-box">
	<view class="card-title-box remove-border">
		<view class="card-title title-text">食品安全检测数据统计</view>
	</view>
	<view class="card-content-box">
		<checkRingChart v-if="!isEmpty" class="check-ring-box" :class="hiddenCanvas ? 'hidden-canvas' : ''" :chartData="chartData" :title="title"
			:subtitle="subtitle" :color="color"></checkRingChart>
		<view v-if="isEmpty" class="empty-box-wrap">
			<view class="empty-box">
				<view class="empty-img"></view>
				<view class="empty-title">暂无数据</view>
			</view>
		</view>
	</view>
</view>

data() {
	return {
		hiddenCanvas: false
	};
},
methods: {
	closeCanvas() {
		this.hiddenCanvas = true;
	},
	showCanvas() {
		this.hiddenCanvas = false;
	}
}

.hidden-canvas {
	transform: translateX(200%);
}

大功告成

可以看到canvas图表在弹出框后被移走