关于uniapp小程序内置canvas标签层级过高，覆盖其他标签问题

uniapp

原因：是因为canvas是原生组件，而uniapp的 view、text 等标签相当于二次封装过的，给予z-index也是不生效的，微信开发者工具没有问题，但真机测试会爆这个雷

恰巧碰上一个需求需要一个canvas生成图片放在页面，点击按钮后生成一个二维码模态框，二维码也是canvas生成图片的，所以就导致不仅模态框,两个canvas图片之间层级也出现了冲突，

解决方案：

1.使用uniapp提供的 cover-view、cover-image 等标签.

2.写app端有提供nvue语法，仅支持flex布局

案例可参考：uniapp vue nvue 模态框遮罩_nicepainkiller的博客-优快云博客

【uni-app系列】uni-app之nvue使用_奔跑吧邓邓子的博客-优快云博客_uniapp 使用nvue

3.给canvas标签一个判断，判断canvas中有没有url生成，没有则使用canvas标签，有则使用image标签动态传值即可

个人采用的方案三，更简洁一些

<canvas class="mycard" canvas-id="myCanvas" v-if="!imgUrl" />
  <image  class="mycard" :src="imgUrl"
  v-if="isAuthentication==1 && imgUrl 
|| isShare==true && imgUrl" />

data(){
   return{
   imgUrl: "", // 用于存储canvans生成图片
  }
}

 效果如下：