在Vue-cli项目中动态生成二维码

1、引入qrcode--------npm install qrcode

2、在main.js中引入

import QRCode from ‘qrcode’ //定义生成二维码组件
3、在需要使用到生成二维码的组件中引入

import QRCode from ‘qrcode’ //引入生成二维码组件
4、在HTML中定义生成的位置，注意添加样式

<template>
  <div id="query">
    <h1>二维码：</h1>
    <canvas id="canvas"></canvas>
  </div>

</template>

#canvas{ width: 80%!important; height: auto!important;
}

5、在js中定义生成二维码的方法并调用

    //动态生成二维码
 useqrcode(){ 
 //生成的二维码内容，可以添加变量
　　　　this.QueryDetail='http://www.kspxzx.com/#/guard'+"?unique_code="+this.QueryDetail; 
　　　　var canvas = document.getElementById('canvas') 
　　　　QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
　　　　	 if (error) {
　　　　	 }else{
　　　　	 }
　　　　})