方法1：qrcode

qrcode.js是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas绘制而成,不依赖任何库。可以快速的在web页面中绘制出二维码。

看一下效果

每张二维码的内容是不一样的，title里面内容就是二维码的内容

1. 安装依赖

npm install --save qrcodejs2

2. 导入方法

import QRCode from 'qrcodejs2'

3. 使用

<template>
  <div>
      <button style="display: block; cursor: pointer; margin-bottom: 20px" @click="bindQRCode">点击生成二维码</button>
      <div id="qrcode" ref="qrCodeDiv"></div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  name: "qrCode",
  data() {
    return {
      text: "我是二维码",
      index: 0,
    };
  },
  methods: {
    bindQRCode() {
      document.getElementById("qrcode").innerHTML = "";//为了防止生成多张，生成前先清空原先的；
      this.index++;
      var text = this.text.substring(0, this.index);
      new QRCode(this.$refs.qrCodeDiv, {
        text: text,//二维码的内容
        width: 150,//二维码的宽度
        height: 150,//二维码的高度
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
      });
    },
  },
};
</script>
#qrcode {
  img {
    background-color: #fff; //设置白色背景色
    padding: 30px; // 利用padding的特性，挤出白边
    box-sizing: border-box;
  }
}

vue-qr

vue-qr比qrcode多了一个再中间添加logo的功能。
看一下效果

1. 安装依赖

npm install vue-qr --save

2. 引入

import vueQr from 'vue-qr'

3. 使用

<template>
  <vue-qr
    :size="300"
    :logoSrc="icode"
    :logoScale='0.3'
    :text="codeValue"
    :margin='2'
  ></vue-qr>
</template>
 
<script>
import vueQr from "vue-qr";
export default {
  name: "qecode",
  data() {
    return {
      codeValue: '我是二维码',
      icode: require("../../assets/image/login/bg2.jpg"),
    };
  },
  components: {
    vueQr,
  },
};
</script>```