在vue项目中引用qrcode

首先安装插件

npm install –save qrcode

在页面中引入

import QRCode from 'qrcodejs2'

在css中

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

1.在methods方法中调用

methods: {

       qrcode () {

            let qrcode = new QRCode('qrcode', {

                 width: 100,

                 height: 100,// 高度

                  text: '56663159' // 二维码内容

                   // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）

                   // background: '#f0f'

                    // foreground: '#ff0'

           }) console.log(qrcode)

      }

},

2. 在mounted中调用

mounted: function () {       

 var qrcode = new QRCode("qrcode", {             

            text: “222222”,    二维码内容   url填后台给的链接         

            width: 150, //控制二维码高度             

            height: 150, //控制二维码宽度           

            colorDark: "#000000", //控制二维码前景色           

            colorLight: "#ffffff", //控制二维码背景色=                   

            correctLevel: QRCode.CorrectLevel.L //设置二维码容错率       

      });     

  },