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

小佳的笔记

已于 2023-02-20 13:34:33 修改

阅读量2.1k

点赞数 3

文章标签： vue.js javascript

于 2021-10-09 14:03:06 首次发布

本文链接：https://blog.csdn.net/qq_45234274/article/details/120669557

版权

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

<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>

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