侧边栏壁纸
  • 累计撰写 121 篇文章
  • 累计创建 0 个标签
  • 累计收到 51 条评论

目 录CONTENT

文章目录

vue项目使用qrcode插件生成二维码

江子辰
2022-06-09 / 0 评论 / 1 点赞 / 153 阅读 / 1,062 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-06-09,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告 广告

下载

npm i qrcodejs2 --save

导入

import QRCode from 'qrcodejs2'

使用

<div class="qrcode" ref="qrCodeDiv"></div>
<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
  },
  methods: {
	bindQRCode() {
      this.$nextTick(() => {
        new QRCode(this.$refs.qrCodeDiv, {
          text: url,//url地址  文本等需要转换为二维码的内容
          width: 80,
          height: 80,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L, //容错率,L/M/H
        });
      });
    },
  },
  mounted() {
    this.bindQRCode();
  },
};
</script>

清除

//清除二维码
this.$refs.qrCodeDiv.innerHTML = "";

或者你还可以这么写

var qrcode = document.getElementById("qrcode");
var qrcode = new QRCode(qrcode , {
	text: "https://www.baidu.com/",
	width: 128,
	height: 128,
	colorDark : "#000000",
	colorLight : "#ffffff",
	correctLevel : QRCode.CorrectLevel.H
});
qrcode.clear(); // 清除.
qrcode.makeCode("二维码承载的信息"); // make another code.

参数名参数说明备注
text二维码承载的信息
width二维码宽(像素)
height二维码高(像素)
colorDark二维码颜色
colorLight二维码背景颜色
correctLevel容错级别由低到高
QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H
1
广告 广告

评论区