qrcode(vue3)

原创已于 2025-09-26 16:33:42 修改 · 291 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2025-09-24 15:23:10 首次发布

https://qrcode.nodejs.cn/docs/#qr-code-options 官网

1.npm install qrcode

2.components/code.vue

<script lang="ts" setup>
import { ref, onMounted, watch, nextTick } from 'vue'
import QRCode from 'qrcode'

const props = defineProps({
  text: {
    type: String,
    default: ''
  },
  width: {
    type: Number,
    default: 200
  },
  height: {
    type: Number,
    default: 200
  },
  colorDark: {
    type: String,
    default: '#000000'
  },
  colorLight: {
    type: String,
    default: '#ffffff'
  }
})

const qrCodeRef = ref<HTMLCanvasElement | null>(null)

const drawQRCode = async () => {
  if (qrCodeRef.value && props.text) {
    await QRCode.toCanvas(qrCodeRef.value, props.text, {
      width: props.width,
      color: {
        dark: props.colorDark,
        light: props.colorLight
      }
    })
  }
}

onMounted(() => {
  nextTick(() => {
    drawQRCode()
  })
})

watch(() => props.text, () => {
  nextTick(() => {
    drawQRCode()
  })
})

watch([() => props.width, () => props.height, () => props.colorDark, () => props.colorLight], () => {
  nextTick(() => {
    drawQRCode()
  })
})
</script>

<template>
  <canvas ref="qrCodeRef" :width="width" :height="height" class="qrcode-container"></canvas>
</template>

<style scoped>
.qrcode-container {
  display: inline-block;
}
</style>

如果import QRCode from 'qrcode'报错

那就新建一个qrcodejs2.d.ts（和index.html同级）

declare module 'qrcode';

3.在页面引用

import QRCode from '@/components/code/code.vue'

// 二维码内容
const qrCodeText = ref('http://192.168.1.114:8888/mobile/upload')


<QRCode :text="qrCodeText" :width="80" :height="80" />