在vue中使用qrcodejs2生成二维码

安装

npm install qrcodejs2 –save

使用

需要使用的地方直接引用

import QRCode from ‘qrcodejs2

注意:这个库生成二维码的时候，如果文本长度在215左右就会报错

// 在弹出框使用
<template>
  <div style="margin:0 auto">
    <el-button type="text" @click="open">点击打开 Dialog</el-button>

    <el-dialog :visible.sync="dialogVisible" width="30%">
      <div id="root" ref="qrCodeUrl"></div>
    </el-dialog>
  </div>
</template>

<script> import QRCode from "qrcodejs2"; export default { name: "", components: {}, data() { return { qrcode: null, dialogVisible: false, qrcodeStatus: true }; }, created() {}, mounted() {}, methods: { open() { this.dialogVisible = true; this.creatQrCode(); }, creatQrCode() { this.qrcode = new QRCode(this.$refs.qrCodeUrl, { text: "https://www.baidu.com/", // 需要转换为二维码的内容 width: 100, height: 100, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); } } }; </script>
<style scoped></style>

出现错误

报错原因:是没有获取到节点,在creatQrCode中加入$nextTick


creatQrCode(){
     this.$nextTick(() => {
     .......
     }
}

现在我们会发现,弹出框打开关闭,打开关闭…..会出现这样的情况

在第二次打开的时候没有去清除上一次保存的二维码,需要先清除上一次二维码

qrcode.clear();
或者
this.$refs.qrCodeUrl.innerHTML = "";

温馨提示:可以给单个二维码加css样式进行优化

渲染结构如图; 可以看到是在获取节点的标签(root)下,出现canvas标签,紧跟一个img标签,

没有效果写法
img{
  width: 150px;
  height: 150px;
}

有效
/deep/ img{
......
}

这里还可以使用获取到root下的所有img标签

let imgs = document.querySelectorAll('.root > img')// 获取到是类数组
imgs.forEach(e=>{
    e.style.width = '150px'
})

参数API

QRCode参数

new QRCode(element, option)

名称	默认值	说明
element	–	承载二维码的DOM元素的ID
option	–	参数设置

Option参数

名称	默认值	说明	备注
text	–	二维码承载的信息	如果是string那没有什么好说的。如果是url的话，为了微信和QQ可以识别，连接中的中文使用encodeURIComponent进行编码
width	256	二维码宽度	单位像素（百分比不行）
height	256	二维码高度	单位像素（百分比不行）
colorDark	‘#000000’	二维码前景色	英文\十六进制\rgb\rgba\transparent都可以
colorLight	‘#ffffff’	二维码背景色	英文\十六进制\rgb\rgba\transparent都可以
correctLevel	QRCode.CorrectLevel.L	容错级别	由低到高 QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H

API接口

名称	参数	说明	使用
clear	–	清除二维码	qrcode.clear()
makeCode	string	替换二维码（参数里面是新的二维码内容）	qrcode.makeCode(‘new content’)

结尾

插件git地址 github.com/davidshimjs…

上述代码使用 elementUI vue

@2021-11-23——《vue中使用qrcodejs2生成二维码》

今天的文章vue中使用qrcodejs2生成二维码分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/18361.html

vue中使用qrcodejs2生成二维码