vue3二维码的生成（绿码、黄码...）——QRcanvas

1. 下载安装命令： npm install qrcanvas
2. 代码：

<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. 运行结果：
   
4. 扫码出来就是 data 的值：212121
5. 在工作中常见的场景：扫描快速拨打电话，或是用特定的APP扫码，只需要替换掉data中的值就可以了 ，例如：
6. data: baseUrl + "/接口=" + telephoneNumber,或者拼接字符串data:{‘time’:111111,‘Id’:222},
7. 最近要求 二维码带颜色 ，绿码 黄码 红码。。。。。
9. 加两个参数就好了 ，前景色和背景色 background: { type: String, default: "white", }, foreground: { type: String, default: "black", },// 经典黑白配色 ，喜欢什么颜色加什么