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",
    })
}