vue本地实现生成二维码功能

青莳吖

于 2024-03-11 20:47:03 发布

阅读量307

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44758923/article/details/136634729

版权

本文介绍了如何在Vue.js中使用qrcode库动态生成QR码，并将其渲染在canvas元素上。代码展示了组件的模板、脚本部分以及生成QR码的方法实现。

摘要由CSDN通过智能技术生成

首先导入依赖

npm install qrcode --save-dev

然后是页面代码

<template>
  <div>
    <canvas ref="qrcodeCanvas"></canvas>
  </div>
</template>

<script>
import QRCode from 'qrcode';

export default {
  mounted() {
    this.generateQRCode();
  },
  methods: {
    async generateQRCode() {
      const canvas = this.$refs.qrcodeCanvas;
      // const url = 'https://example.com'; // 这里填写你要生成 QR 码的数据，可以是链接、文本等
      const url = '你好'; // 这里填写你要生成 QR 码的数据，可以是链接、文本等
      try {
        await QRCode.toCanvas(canvas, url);
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>