当前位置：首页 > VUE

vue实现生成二维码

2026-03-27 06:45:28VUE

使用 vue-qrcode 库生成二维码

安装 vue-qrcode 库：

npm install @chenfengyuan/vue-qrcode

在组件中引入并使用：

<template>
  <vue-qrcode :value="qrText" :size="200"/>
</template>

<script>
import VueQrcode from '@chenfengyuan/vue-qrcode';

export default {
  components: { VueQrcode },
  data() {
    return {
      qrText: 'https://example.com'
    }
  }
}
</script>

使用 qrcode 原生库生成二维码

安装 qrcode 库：

npm install qrcode

在组件中使用：

<template>
  <img :src="qrImage" alt="QR Code">
</template>

<script>
import QRCode from 'qrcode';

export default {
  data() {
    return {
      qrImage: ''
    }
  },
  mounted() {
    QRCode.toDataURL('https://example.com')
      .then(url => {
        this.qrImage = url
      })
      .catch(err => {
        console.error(err)
      })
  }
}
</script>

自定义二维码样式

使用 qrcode 库时可以添加更多样式选项：

QRCode.toDataURL('https://example.com', {
  color: {
    dark: '#000000',  // 黑点颜色
    light: '#ffffff' // 背景颜色
  },
  width: 300,
  margin: 2,
  errorCorrectionLevel: 'H' // 纠错级别
})

下载二维码功能实现

添加下载按钮和方法：

<template>
  <img :src="qrImage" alt="QR Code">
  <button @click="downloadQR">下载二维码</button>
</template>

<script>
export default {
  methods: {
    downloadQR() {
      const link = document.createElement('a')
      link.href = this.qrImage
      link.download = 'qrcode.png'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

响应式二维码尺寸

根据屏幕宽度动态调整二维码大小：

vue实现生成二维码

<template>
  <vue-qrcode 
    :value="qrText" 
    :size="qrSize"
    @click="regenerateQR"
  />
</template>

<script>
export default {
  data() {
    return {
      qrSize: Math.min(window.innerWidth, 300)
    }
  },
  methods: {
    handleResize() {
      this.qrSize = Math.min(window.innerWidth, 300)
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>