Vue使用QRCode插件，生成二维码

最新推荐文章于 2025-05-29 10:29:46 发布

qq_40291247

最新推荐文章于 2025-05-29 10:29:46 发布

阅读量580

点赞数

CC 4.0 BY-SA版权

分类专栏： vue二维码生成 vue生成二维码文章标签： vue二维码生成

本文链接：https://blog.youkuaiyun.com/qq_40291247/article/details/98982128

vue二维码生成同时被 2 个专栏收录

1 篇文章

订阅专栏

vue生成二维码

1 篇文章

订阅专栏

本文详细介绍如何使用Vue和qrcode插件生成二维码。首先通过npm安装qrcode，然后在mian.js中引入并挂载到Vue原型上，最后在组件中调用方法生成二维码到canvas元素。示例代码展示了完整的实现过程。

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

第一步：安装

npm install --save qrcode

第二步：mian.js引入

//Vue使用QRCode插件，生成二维码
import QRCode from 'qrcode'
Vue.prototype.$QRCode = QRCode

第三步：模板使用

<template>
  <div>
    <canvas id="canvas"></canvas>
  </div>
</template>
<script>
  export default {
    name: 'rechargeBox',
    data () {
      return {
        ruleForm: '',
      }
    },
    methods: {
      //生产二维码
      useqrcode(url){
        var canvas = document.getElementById('canvas')
        this.$QRCode.toCanvas(canvas, url, function (error) {
          if (error) console.error(error)
        })
      },
    },
    mounted() {
    let url = 'http://www.baidu.com'
     this.useqrcode(url);
    }
  }
</script>