Vue实现二维码功能

1.下载qrcode插件

npm install --save qrcode

2.父组件

引入qrcode组件
import Qrcode from "./Qrcode.vue";

<Qrcode ref="Qrcode" />

components: {
    Qrcode,
 },

调用组件方法
this.$refs.Qrcode.showQRCode();

3.子组件

<template>
  <div class="app-container">
    <div class="qrcode" ref="qrcodeContainer"></div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      qrcode: "",
    };
  },
  methods: {
    showQRCode() {
      防止多次点击生成多个二维码
      this.$refs.qrcodeContainer.innerHTML = "";
      let qrcode = new QRCode(this.$refs.qrcodeContainer, {
        text: "http://baidu.com",
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
  },
};
</script>

 其中text，按业务需求更改