qrcode根据本地数据生成二维码第一次显示跨页面后显示异常

2022-07-29 12:02:25 阅读：157 来源： 互联网

最近写二维码的时候，突然想起之前项目遇到过的一个问题，网上也没有这方面解答，想到大家今后可能也会遇到这类问题，在此记录下来，希望对你们有所帮助，大佬们不喜勿喷，qrcode配合画布canvas本地生成二维码的时候第一次能够正常显示，最下方会贴出代码

跨页面后显示异常

刚开始是有些头疼的，因为控制台一切正常，没有抛出错误，然后去看qrcode的参数属性也没有问题，我是多个页面需要生成多个二维码，封装了qrcode组件

F12逐步排查看html结构，生成多个二维码之后并没有销毁

所以第一想到的是可能是覆盖问题，我也不知道为什么关闭窗口后并没有销毁，那么就手动remove()销毁它吧，结果还是悲剧的，依旧没有效果，通过打印结果可以得知二维码是正常生成了的只是没有被渲染上去

难道是跨页面的时候当前页面的id和其他页面的id重复导致qrcode生成二维码成功了但是画布无法正常显示吗，那么只需要每个引用了qrcode组件的页面都传一个唯一的值过来做id就行了，抱着试一试的态度我再次打开了vscode，将父组件的name传了过来

父组件

子组件id

props

之后再获取到nameOn生成二维码，还挺好用

　　<div>
　　　　　　　　<!-- 单据二维码-->
            <el-table-column :label="$t('receipt.orderQRCode')"
                              header-align="center"
                              align="center"
                              min-width="150">
              <template slot-scope="scope">
                <el-button type="primary" @click="createORCode(scope.row.receiptOrder)">
                  {{$t('receipt.generateQRcode')}}
                </el-button>
              </template>
            </el-table-column>

<q-r-code-dialog v-if="codeDialogVisible" :orderNumber="orderNumber" :nameOn="this.$options.name" ref="codeDialog" @confirm="createORCode"> 　　　　</q-r-code-dialog> </div> </template>

    /**
     * 生成二维码
     */
    createORCode (orderNumber) {
      this.codeDialogVisible = true
      this.orderNumber = orderNumber
      this.$nextTick(() => {
        this.$refs.codeDialog.init()
      })
    },

qrcode公共组件

<template>
  <!-- 二维码 -->
  <el-dialog
    width="400px"
    :title="$t('receipt.viewQRCode')"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @closed="visible = false"
    :append-to-body="true"
  >
    <el-container style="margin-left: 5px">
      <el-header style="height: 15px">
        {{ $t("receipt.documentNo") + "：" + orderNumber }}
      </el-header>
      <el-main>
        <canvas :id="nameOn" class="canvas"></canvas>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'QRCode',
  props: {
    orderNumber: {
      type: String,
      default: ''
    },
    nameOn: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    // 初始化
    init () {
      this.visible = true
      this.$nextTick(() => {
        console.log(this.orderNumber, 'orderNumber')
        // console.log(this.nameOn, 'name')
        if (this.orderNumber) {
          // this.viewImgVisible = true
          // 生成二维码
          let opts = {
            errorCorrectionLevel: 'H',
            type: 'image/jpeg',
            rendererOpts: {
              quality: 0.3
            }
          }
          console.log(opts, 'opts')
          let canvasEle = document.querySelector(`#${this.nameOn}`)
          QRCode.toDataURL(canvasEle, this.orderNumber, opts, function (err) {
            if (err) throw err
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.canvas {
  margin-left: 10%;
  width: 80% !important;
  height: 80% !important;
}
</style>

标签：orderNumber,生成,组件,二维码,qrcode,页面
来源： https://www.cnblogs.com/dengsir39/p/16531802.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

qrcode根据本地数据生成二维码第一次显示跨页面后显示异常