ckt-leble-vue/src/views/modules/label/QrCode.vue

<template>
  <div v-if="false">
    <!-- 你可以选择是否需要展示 base64 编码字符串 -->
    <div v-for="(code, index) in qrCodesBase64" :key="index">
<!--      <p>{{ code }}</p>-->
      <img :src="code"/>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'QrCode',
  data() {
    return {
      texts: ['text1', 'text2', 'text3'], // 你要生成二维码的文本数组
      qrCodesBase64: []
    }
  },
  methods: {
    init(contextList){
      this.texts = contextList
      this.generateQRCodesSync(this.texts)
      return this.qrCodesBase64
    },
    generateQRCodeSync(text) {
      let base64 = ''
      QRCode.toDataURL(text, { errorCorrectionLevel: 'H' }, (err, url) => {
        if (err) {
          console.error(err)
          return
        }
        base64 = url
      })
      return base64
    },
    generateQRCodesSync(texts) {
      this.qrCodesBase64 = texts.map(text => this.generateQRCodeSync(text))
    }
  },
  mounted() {
    this.generateQRCodesSync(this.texts)
  }
}
</script>

<style>
/* 你的样式 */
</style>