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

最新推荐文章于 2024-08-09 13:40:51 发布

qq_40291247

最新推荐文章于 2024-08-09 13:40:51 发布

阅读量534

点赞数

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

本文链接：https://blog.csdn.net/qq_40291247/article/details/98982128

版权

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

1 篇文章 0 订阅

订阅专栏

vue生成二维码

1 篇文章 0 订阅

订阅专栏

第一步：安装

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>