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组件弹出就加上样式，收回就去掉样式即可。文章来源：https://www.toymoban.com/news/detail-411006.html
动态加上移出视野的样式代码
<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图表在弹出框后被移走文章来源地址https://www.toymoban.com/news/detail-411006.html
到了这里，关于uniapp开发小程序中因uchart的canvas层级过高遮盖uni-datetime-picker组件的解决办法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
