微信小程序canvas层级最高问题

主要是解决了uvIew.ui中的环形进度条，小程序里层级问题。

使用了环形进度条组件之后，点击展示列选择器，层级有误。

解决思路

利用uni.canvasToTempFilePath将canvas绘制的图形，转变成图片。https://uniapp.dcloud.io/api/canvas/canvasToTempFilePath

以下是子组件u-circle-progress.vue中的代码

<canvas
	class="u-canvas-bg"
	:canvas-id="elBgId"
	:id="elBgId"
	:style="{
		width: widthPx + 'px',
		height: widthPx + 'px'
	}"
	v-if="imgSrc == ''"
></canvas>
<canvas
	class="u-canvas"
	:canvas-id="elId"
	:id="elId"
	:style="{
		width: widthPx + 'px',
		height: widthPx + 'px'
    }"
    v-if="imgSrc == ''"
></canvas>
<image class="img1" v-if="imgSrc" :src="imgSrc" mode="" style="width: 100rpx;height: 100rpx;"></image>
<image class="img2" v-if="imgSrc" :src="imgSrc2" mode="" style="width: 100rpx;height: 100rpx;"></image>

 在data里面记得添加imgSrc="",imgSrc2=""

然后在methods里写两个函数。

        /* 带颜色的进度条转换为图片 */
		fn1(){
			let _this = this
			uni.canvasToTempFilePath({
			  x: 100,
			  y: 100,
			  width: 100,
			  height: 100,
			  destWidth: 100,
			  destHeight: 100,
			  canvasId: _this.elId,
			  success: function(res) {
			    // 在H5平台下，tempFilePath 为 base64
				_this.imgSrc = res.tempFilePath
			  },
			  fail:function(res){
				  console.log(res)
			  }
			},_this)
			console.log(_this.imgSrc)
		},
		/* 环形背景装换为图片 */
		fn2(){
			let _this = this
			uni.canvasToTempFilePath({
			  x: 100,
			  y: 100,
			  width: 100,
			  height: 100,
			  destWidth: 1000,
			  destHeight: 1000,
			  canvasId: _this.elBgId,
			  success: function(res) {
			    // 在H5平台下，tempFilePath 为 base64
				_this.imgSrc2 = res.tempFilePath
			  },
			  fail:function(res){
				  console.log(res)
			  }
			},_this)
			console.log(_this.imgSrc2)
		}

样式设置

.img1{
	position: absolute;
	z-index: 2;
}
.img2{
	position: absolute;
	z-index: 1;
}

以下是父组件的代码

父组件调用子组件的函数，利用ref

<u-circle-progress active-color="#FC3F06" :percent="95" width="100" border-width="8" ref="child" duration="600">
	<view class="u-progress-content">
		<text class='u-progress-info'>95%</text>
	</view>
</u-circle-progress>

父组件调用子组件函数

SelectTime(){
	this.$refs.child.fn1()
	this.$refs.child.fn2()
	this.show = true;
}

 最后在要触发时间选择器的地方，调用这个函数就可以了。