小程序转换二维码canvas层级太高导致弹出框被覆盖

小白兔12345678

已于 2024-04-26 17:51:38 修改

阅读量342

点赞数 3

文章标签：小程序前端 uni-app

于 2024-03-22 16:15:09 首次发布

本文链接：https://blog.csdn.net/m0_58373910/article/details/136944399

版权

通过id数字生成二维码,有img后把canvas隐藏!

//引入插件   import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'

//canvas 宽、高一定一定和size设置的尺寸px一样!!!!!!!否则手机字体放大会显示不全!!!
<canvas canvas-id="qrcode" style="width:120px;height:120px;" v-if="!qr_code" ></canvas>
 <image v-else :src="qr_code" mode="widthFix"></image>




//调用
    this.make('xxxxx')
 // 二维码生成并显示
      make(url) {
            uQRCode.make({
                  canvasId: 'qrcode',
                  componentInstance: this,
                  text: url,
                  size: 120,
                  backgroundColor: '#ffffff',
                  foregroundColor: '#000000',
                  fileType: 'jpg',
                  correctLevel: uQRCode.errorCorrectLevel.H
            }).then(res => {
                  this.qr_code = res  //img图片
                  console.log(res,'图片数据')
            }).catch(err => {
                  console.log(err,)
            })

      },