vue中使用AraleQRCode生成二维码

问题背景

本文介绍vue中生成二维码的一种方案，使用AraleQRCode来实现。

问题分析

（1）安装对应的依赖包

npm i arale-qrcode --save

（2）完整代码如下:

<template><!-- 二维码 --><div class="code"><img :src="img" /></div>
</template><script>
import AraleQRCode from "arale-qrcode";
export default {name: 'app',data: () => {return {img: "",}},components: {},mounted() {this.makeCode();},methods: {//生成二维码方法makeCode() {const result = new AraleQRCode({render: "svg",      // 定义生成的类型 'svg' or 'table dom’text: "baorant so handsome!", // 二维码的链接size: 150,      //二维码大小});// 将svg xml文档转换成字符串const svgXml = new XMLSerializer().serializeToString(result);// 将svg字符串转成base64格式，通过 window.btoa方法创建一个 base-64 编码的字符串，进行二次编码解码(encodeURIComponent 字符串进行编码和解码，unescape 进行解码)。const src ="data:image/svg+xml;base64," +window.btoa(unescape(encodeURIComponent(svgXml)));// 本地存储图片localStorage.setItem("image", src);this.getImg();},// 获取存储的图片给到页面getImg() {this.img = localStorage.getItem("image");console.log("$$$$", this.img);localStorage.removeItem("image");},},
};
</script><style>
.code {display: flex;width: 300px;height: 300px;
}
</style>

(3)运行结果如下：

扫描该二维码可生成对应的内容。