vue实现二维码生成

使用 qrcodejs2 实现二维码生成

 

下载 qrcodejs2 依赖：

npm install qrcodejs2 -S

 

需要使用 qrcodejs2 页面引入该依赖：

import QRCode from 'qrcodejs2' // 引入qrcode

 

html代码：

<div class="Qrcode"  >
    <!-- 生成二维码 -->
    <div id="qrcode" class="share"></div>
</div>

 

css代码：

  .Qrcode
  {
    width: 100%;
    height: 250px;
  }
  
  .share{
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    margin-top: 25px;
    margin-bottom: 25px;
  }

 

JS代码：

qrcode() {
      document.getElementById("qrcode").innerHTML = "";//清除上一次生成的二维码，防止刷新生成多个二维码
      let qrcode = new QRCode('qrcode', {
            width: 80,//二维码宽度
            height: 80,//二维码高度
            text:  'content', // 二维码内容
            colorDark: "#000",
            colorLight: "#fff",
    })
}