找大学生做家教的网站,家装公司网站建设网站,oppo软件商店app下载,政务网站建设合同vue中使用AraleQRCode生成二维码
问题背景
本文介绍vue中生成二维码的一种方案#xff0c;使用AraleQRCode来实现。
问题分析
#xff08;1#xff09;安装对应的依赖包
npm i arale-qrcode --save #xff08;2#xff09;完整代码如下:
template!-…vue中使用AraleQRCode生成二维码
问题背景
本文介绍vue中生成二维码的一种方案使用AraleQRCode来实现。
问题分析
1安装对应的依赖包
npm i arale-qrcode --save 2完整代码如下:
template!-- 二维码 --div classcodeimg :srcimg //div
/templatescript
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/svgxml;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);},},
};
/scriptstyle
.code {display: flex;width: 300px;height: 300px;
}
/style(3)运行结果如下 扫描该二维码可生成对应的内容。
