vue实现二维码功能

1，安装QRcode

cnpm install qrcode

2.引入并使用QRcode

<template>
	<div class="main">
     	<canvas id="QRCode"></canvas>
 	 	<button  @click="getQRCode()">点击生成二维码</button>
    </div>
</template>

<script>
    // 引入qrcode
    import QRCode from 'qrcode'
    export default{
    
    
      data(){
    
    
          return {
    
    
              QRCodeMsg: "", //生成二维码信息
          }
      },
       // 通过监听获取数据
       watch: {
    
    
	    QRCodeMsg(val) {
    
    
	      // 获取页面的canvas
	      var msg = document.getElementById("QRCode");
	      // 将获取到的数据（val）画到msg（canvas）上
	      QRCode.toCanvas(msg, val, function(error) {
    
    
	        console.log(error);
	      });
	    }
	  },
	  methods:{
    
    
	    getQRCode() {
    
    
	    //生成的二维码为URL地址
	      this.QRCodeMsg = window.location.href;
	    }
     }
  }
</script>

<style>
 .main{
    
    
        width:9px;
        height:9px;
    }
// 限制画布大小
    #QRCode{
    
    
        width:10px;
        height:10px;
    }
</style>