Vue3 QR code generation (green code, yellow code...) - QRcanvas

1. Download and install command: npm install qrcanvas
2. code:

<template>
  <div id="qrcode"></div>
</template>
<script>
import { qrcanvas } from "qrcanvas";
import { nextTick } from "vue";
export default {
  setup() {
    nextTick(() => {
      var canvas = qrcanvas({
        data: '212121'，
        size: 100,
      });
      document.getElementById("qrcode").innerHTML = "";
      document.getElementById("qrcode").appendChild(canvas);
    });

    return {};
  },
};
</script>

3. operation result:
   
4. Scan the code to get the value of data: 212121
5. Common scenarios at work: Scan to quickly make a call, or scan a code with a specific APP, just replace the value in data, for example:
6. data: baseUrl + "/接口=" + telephoneNumber,Or concatenate string data:{'time':111111,'Id':222},
7. Recently, QR codes are required to be colored, with green codes, yellow codes and red codes. . . . .
9. Just add two parameters, foreground color and background color background: { type: String, default: "white", }, foreground: { type: String, default: "black", },// classic black and white color matching, add whatever color you like