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

最新推荐文章于 2024-09-03 08:13:58 发布

原创最新推荐文章于 2024-09-03 08:13:58 发布 · 613 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue二维码生成

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

1 篇文章

订阅专栏

vue生成二维码

1 篇文章

订阅专栏

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

第一步：安装

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>