自定义二维码

自定义二维码

最简单的方式

<img style="width: 300px;height: 300px;" src="https://api.qrserver.com/v1/create-qr-code?data=https://www.baidu.com">

• 最简单的方式，直接一个img标签即可，data后面是跳转的链接
• 相关api

qrcodejs2

• 安装依赖

  npm i qrcodejs2 -S
  

• 引入依赖

  import QRCode from 'qrcodejs2'
  

• 定义生成方法

  • 第一种简便方法

    mounted() {
        this.qrCode('https://www.baidu.com');
      },
    methods: {
        qrCode(url) {
          let qrcode = new QRCode('qrcode', {
            width: 150, // 图片宽高
            height: 150,
          });
          qrcode.clear(); //清除二维码
          qrcode.makeCode(url); //生成另一个新的二维码
        },
      },
    

  • 第二种方法，可以定义配置

    • 二维码复杂程度属性（容错级别）correctLevel（可以用数字 0 - 3 代替属性值）
      • QRCode.CorrectLevel.L
      • QRCode.CorrectLevel.M
      • QRCode.CorrectLevel.Q
      • QRCode.CorrectLevel.H

    qrCode2() {
          new QRCode('qrcode', {
            text: '鼠标悬停出现文字',
            width: 150,
            height: 150,
            colorDark: '#000000', //前景色
            colorLight: '#ffffff', //背景色
            correctLevel: 3,
          });
          /* qrcode.clear(); //清除二维码
          qrcode.makeCode(url); //生成另一个新的二维码 */
        },
    

arale-qrcode

• 安装依赖

  npm i arale-qrcode -S
  

• 引入

  import AraleQRCode from 'arale-qrcode';
  

• 二维码容器定义

  <template>
    <div>
      <div id="share_tools"></div>
    </div>
  </template>
  

• 定义函数

  aralecode() {
        var codeFigure = new AraleQRCode({
          render: 'svg', // 生成的类型 'svg' or 'table'
          text: 'https://github.com/soldair/node-qrcode', // 需要生成二维码的链接
          size: 120, // 生成二维码大小
        });
        var share_tools = document.querySelector('#share_tools');
        share_tools.appendChild(codeFigure);
      },