qrcode根據本地資料生成二維碼第一次顯示跨頁面后顯示例外-有解無憂

最近寫二維碼的時候，突然想起之前專案遇到過的一個問題，網上也沒有這方面解答，想到大家今后可能也會遇到這類問題，在此記錄下來，希望對你們有所幫助，大佬們不喜勿噴，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" ></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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500586.html

標籤：其他

上一篇：vue中如何在自定義組件上使用v-model和.sync

下一篇：記錄--5個知識點，讓 Vue3 開發更加絲滑