2021/04/29 插件qrcodejs2将后端链接转换成二维码

背景
需求内有个扫码功能，后端会把链接从接口返回给我，我把收到的链接转换成二维码显示到页面上
步骤

– step1.安装

npm install qrcodejs2 --save

– step2. 引入

–1.可以在main.js 中全局引用（这种方式我会报错）

–2.在使用的页面上局部应用

import QRCode from "qrcodejs2";

–step3.页面上写代码

<template><div><div><p>签章二维码test</p></div><!-- code box 这里可以自己写样式，也可以写加在下个div上 --><div class="code_box"><div id="qrcode" ref="qrcode"></div></div></div>
</template><script>import QRCode from "qrcodejs2";data() {return {qCodeUrl: "",};},mounted() {//method1  this.$nextTick(() => {this.initCode();});//method2  报错 el.appendChild is not a functionthis.$nextTick(() => {setTimeout(() => {this.initCode();}, 2000);});},methods:{//⚠️**this.$refs.qrcode**不要写成字符串了，否则会一直报错 can't append of nullvar qrcode = new QRCode(this.$refs.qrcode, {text: this.qCodeUrl, // 需要生成二维码的内容width: 147,height: 147,colorDark: "#000000",colorLight: "#ffffff",correctLevel: QRCode.CorrectLevel.H,});
//也可以写成这种
let myCode = new QRCode("qrcode", {width: 150, // 二维码宽度height: 150, // 二维码高度// text: "sdfsdfsf",text: this.imgCode,});
}
</script>

==我在main.js中这样引入的

–在页面上使用就会报错 el.appendChild is not a function

–结合$nextTick和setTimeout一起使用，还是会报错，有解决过这个问题的朋友请留言

=更新

–由于dom未渲染完成，调用生成二维码函数会报错，所以，我的代码是在watch中监听到数据的改变，再来调用生成二维码函数，最好和setTimeout还有$nextTick连用

watch: {imgCode: {//深度监听，可监听到对象、数组的变化handler(val, oldVal) {let that = this;if (val) {that.$nextTick(function (prams) {that.createQR();});}},},},

2021/04/29 插件qrcodejs2将后端链接转换成二维码相关推荐

谷歌浏览器地址转换成二维码的插件，只需几行代码即可实现
谷歌浏览器插件,是利用javascript进行编写的.具体代码参考在github里面,这是本人简单编写的一个谷歌浏览器地址转换成二维码的插件,里面的代码思路本文暂时不做解析,只是介绍如何使用这个插件. ...
将url动态转换成二维码插件 - 兼容IE8
插件地址 http://static.runoob.com/assets/qrcode/qrcode.min.js ,网页直接打开,然后ctrl+s保存到本地. <!DOCTYPE html& ...
将链接地址转换为二维码并且复制
前言:我的需求是讲链接地址转换成二维码,供用户去使用并展示H5端,这里会说到一些小细节,先上代码吧~ 1.html结构 2.生成二维码 3.复制二维码要注意的一点是 : 首先二维码的密度是根据参数的 ...
前端页面中根据链接随机生成二维码
前端页面中根据链接随机生成二维码 1.需要安装qrcodejs2 npm install qrcodejs2 -save 2.在所需要的页面中引入 import QRCode from 'qrcode ...
在微信中，实现微信点击链接或者扫描二维码在浏览器中打开指定的链接
需求概述最近很多朋友问我,为什么我的微信域名或者QQ域名怎么总是提示拦截呢?在这里跟大家说一下吧: 第一点:就是域名里面的内容违规或者诱导被举报而导致的拦截第二点:就是被用户或者同行恶意举报而导致 ...
链接如何生成二维码？怎样创建一个网址二维码？
现在很多小伙伴都发现,可以通过扫描二维码跳转到对应的链接页面,比如商品详情页.问卷调查.线上工具.网页推广等等多种类型内容.那么这些链接转二维码是如何操作的呢?下面来给大家分享一下使用二维码在线生成器 ...
链接怎么生成二维码？教你学会制作二维码
链接怎么生成二维码?现如今二维码的应用十分广泛,我们几乎每天都会接触到二维码.二维码蕴含着丰富的信息,通过扫描二维码,我们可以获取很多信息.那么大家会制作二维码吗?其实制作二维码并非是什么难事,这里小 ...
问卷链接怎么做二维码？如何使用二维码做问卷调查？
当制作好问卷调查链接时,想要用二维码的形式让他人扫码填写,该如何将链接转二维码处理呢?想要将链接生成二维码图片,那么最简单的方法可以使用二维码生成器工具来处理,下面给大家分享一下链接网址转二维码的具体 ...
【vue】链接生成为二维码图片-qrcode.js2
通过qrcode.js2将链接生成为二维码图片 npm下载包 npm i qrcode.js2 Demo <template><div ref='qrcode'></di ...

2021/04/29 插件qrcodejs2将后端链接转换成二维码

2021/04/29 插件qrcodejs2将后端链接转换成二维码相关推荐

最新文章

热门文章