js生成二维码&qrcode

QRCode.js是一个用于生成二维码的JavaScript库。经过获取DOM的标签,再经过Canvas或者img绘制而成。 qrcodejsjavascript

方法一

一、直接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处理)css

• npm i qrcodejs2
• import QRCode from 'qrcodejs2'

不全局依赖，能够弄个外部UI 库，而后引入vue

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>
复制代码

参数列表

效果

参考

qrcode.jsjava

3-5年内部岗位（平安、乐信、500万、vivo、oppo）推荐机会，欢迎发简历到： zgxie@126.comgit