js生成二維碼&qrcode

QRCode.js是一個用於生成二維碼的JavaScript庫。經過獲取DOM的標籤,再經過Canvas或者img繪製而成。 qrcodejs

方法一

一、直接cdn script 引入

<div id="qrcode"></div>
<script type="text/javascript">
    new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
</script>
複製代碼

二、vue 組件引入（非全局）

tips: 如何vue用了v-if注意dom是否已經有了。(setTimeout處理)

• npm i qrcodejs2
• import QRCode from 'qrcodejs2'

不全局依賴，能夠弄個外部UI 庫，而後引入

import QRCode from 'qrcodejs2'
export default QRCode
複製代碼

使用

// dom 生成二維碼的盒子
import QRCode from 'XXXXXX/qrCode'  // 組件目錄

setTimeout(() => {
    let qrCode = new QRCode(dom, {
      width: 193, // 圖像寬度
      height: 193, // 圖像高度
      colorDark: '#000000', // 前景色
      colorLight: '#ffffff', // 背景色
      correctLevel: QRCode.CorrectLevel.H // 容錯級別
    })
    qrCode.clear()
    qrCode.makeCode(url)
}, 0)

複製代碼

二維碼邊緣箭頭 css

<div class="qrCodeLine"></div>
複製代碼

.qrCodeLine{
        background: linear-gradient(#17161C, #17161C) left top,
        linear-gradient(#17161C, #17161C) left top,
        linear-gradient(#17161C, #17161C) right top,
        linear-gradient(#17161C, #17161C) right top,
        linear-gradient(#17161C, #17161C) right bottom,
        linear-gradient(#17161C, #17161C) right bottom,
        linear-gradient(#17161C, #17161C) left bottom,
        linear-gradient(#17161C, #17161C) left bottom;
        background-repeat: no-repeat;
        background-size: 4px 20px, 20px 4px;
        height: 222px /@p;
        width: 222px /@p;
        display: flex;
        margin: 0 auto;
        img{
          display: block;
          width: 193px /@p;
          height: 193px /@p;
          margin: auto;
        }
  }
複製代碼

方法二

使用方法

• 安裝

npm install --save katoto_qrcode
複製代碼

• 使用 components方式引入

<template>
  <div id="app">
    <katotoQrcode :qrWidth="200" :codeMsg="codeMsg"> </katotoQrcode>
  </div>
</template>
<script>
import katotoQrcode from 'katoto_qrcode'
export default {
  components: {
    katotoQrcode
  },
  data(){
    return{
      codeMsg: ['1', '2', '3']
    }
  }
}
</script>
複製代碼

參數列表

參數名	類型	默認值	說明
qrWidth	Number	200	二維碼的圖像寬度
qrHeight	Number	200	二維碼的圖像高度
colorDark	String	#000000	二維碼前景色
colorLight	String	#ffffff	二維碼背景色
codeMsg	String | Array	123	二維碼數據，若是傳入的是數組，就展現多個二維碼
scanMargin	String | Number	20	二維碼邊角的間距, 寫0就不展現邊角樣式

效果

參考

qrcode.js

3-5年內部崗位（平安、樂信、500萬、vivo、oppo）推薦機會，歡迎發簡歷到： zgxie@126.com