bug描述

頁面需要展示一個環(huán)形圖，可以按時間段篩選數據，所以我用了uchart和uni-datetime-picker組件。

但uchart用到了canvas，其層級過高，當實機運行小程序時會遮蓋彈出的uni-datetime-picker組件

解決辦法

當uni-datetime-picker組件彈出遮罩時，把canvas移到用戶視野之外。

uni-datetime-picker組件本質就是普通的vue組件，進入uni-modules尋找uni-datetime-picker組件的代碼，通過監(jiān)聽控制uni-datetime-picker組件彈出收回的屬性控制canvas是否移出用戶視野之外。
幾經查找，選擇監(jiān)控uni-datetime-picker組件下的calendar組件的show屬性，因為實驗監(jiān)控uni-datetime-picker的popup屬性無法實現效果，所以找更靠譜的孫組件calendar，又因為我的uni-app版本不支持 $listen，所以被迫讓中間的uni-datetime-picker中轉 $emit，最終最上層自己寫的組件就可以監(jiān)聽uni-datetime-picker的顯示隱藏了。

在calendar組件里找到的控制臺歷顯示的show屬性

watch: {
			// 自己添加的控制爺組件canvas顯隱的監(jiān)視方法，以解決canvas層級過高問題
			show: {
				handler(newVal, oldVal) {
					if (this.show) {
						this.$emit('closeCanvas');
					}else {
						this.$emit('showCanvas');
					}
				}
			},
		}

在uni-datetime-picker組件里找到每一個用到calendar組件的地方加上自定義事件（closeCanvas，showCanvas）監(jiān)聽

<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方法寫上中轉監(jiān)聽方法

// 監(jiān)聽calendar的觸發(fā)，然后再向上傳遞
methods: {
	closeCanvas() {
		this.$emit('closeCanvas');
	},
	showCanvas() {
		this.$emit('showCanvas');
	}
}

在自己的組件用到uni-datetime-picker的地方也加上監(jiān)聽

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

監(jiān)聽到組件的顯示隱藏就好辦了，寫一個讓canvas水平移出外面的樣式，uni-datetime-picker組件彈出就加上樣式，收回就去掉樣式即可。

動態(tài)加上移出視野的樣式代碼

<view class="card-box">
	<view class="card-title-box remove-border">
		<view class="card-title title-text">食品安全檢測數據統(tǒng)計</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圖表在彈出框后被移走文章來源地址http://www.zghlxwxcb.cn/news/detail-411006.html

到了這里，關于uniapp開發(fā)小程序中因uchart的canvas層級過高遮蓋uni-datetime-picker組件的解決辦法的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！