vue中使用qrcode生成二维码

简单介绍vue生成二维码

安装

npm install --save qrcode

引入

import QRCode from 'qrcodejs2'

使用

// 在html中

<div id="qrcode"></div> // 生成二维码的位置

// js中
created () {
    this.creatQrcode()
},
methods: {
  creatQrcode() {  
     let qrcode = new QRCode('qrcode', {  // 或者使用this.$refs选择元素
     width: 100,  
     height: 100, // 高度  
     text: '56663159', // 二维码内容
     image: ''  
     // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
     // background: '#f0f'  
     // foreground: '#ff0'  
 })  
   console.log(qrcode)  
 }
}

更多

qrcode.clear(); // 清除代码
qrcode.makeCode("https://m.qtshe.com"); // 生成另外一个二维码, 括号内为二维码内容