vue(前端) 生成二维码 npm包管理器

最新推荐文章于 2025-05-07 17:48:03 发布

肥喵蒙太奇

最新推荐文章于 2025-05-07 17:48:03 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/YYYYYun/article/details/104446198

vue 专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了如何在项目中利用qrcode库生成二维码的过程。首先，通过npm安装qrcode依赖包，并在需要的页面进行引用。接着，在Vue组件中调用qrcode的toCanvas方法，将指定的信息转化为二维码并显示在canvas元素上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

- 下载依赖包
我下载的是qrcode

npm install qrcode --save

- 需要的页面进行引用

 import QRCode from 'qrcode'

使用

<template>
<div class="wrap">
  <div class="cont">
    <canvas id="canvas" ref="canvas"></canvas>
    <div class="text">扫一扫</div>
  </div>
</div>
</template>

<script>
import QRCode from 'qrcode'
export default {
  components: {
    QRCode: QRCode
  },
  mounted() {
    this.show()
  },
  methods: {
    show(data) {
      // console.log(this.$refs)
      QRCode.toCanvas(this.$refs.canvas, '包含的信息', function (error) {
        if (error) console.error(error)
        console.log('success');
      })
    }
  }
}
</script>