vue 中使用 QRCode.js 链接转二维码带中间图片

本文介绍了如何在项目中使用QRCode.js库来实现链接转二维码的功能,并提供了详细的代码示例。作者分享了如何在二维码中间添加图片的技巧,并提醒在弹框中使用时需要注意的清理二维码内容的问题。此外,还鼓励读者通过评论交流和提供反馈。
摘要由CSDN通过智能技术生成

前言

项目中需要一个链接转二维码的功能,找了一下 决定使用QRCode.js(很久以前的插件了)

下载引入1.

<div id="qrcode" ref="qrcode"></div>
// 下载
npm install --save qrcodejs2
// 在需要的文件页面中引入
import QRCode from 'qrcodejs2'

使用2.

// aa() 是你需要在哪里使用就调用 qrcode()
aa(){
 this.$nextTick(() => {
        this.qrcode(链接)
      })
}

  // 定义一个函数 生成二维码
   qrcode (text) {
      const qrcode = new QRCode('qrcode', {
        width: 132,
        height: 132,
        text: text, // 二维码地址
        colorDark: '#000',
        colorLight: '#fff'
      })
      return qrcode
    }
     // 如果是在弹框里面使用的话,关闭之后要清除二维码,否则会再次生成一个
     this.$refs.qrcode.innerHTML = '' // 清除

中间加图片3.

QRCode.js中没有中间加图片的方法,可以放一张图片定位在二维码中间我是这样做的 扫码测试了没有问题,哈哈!

ps:有问题可以评论留言,欢迎各位大佬提出你们宝贵的意见&&建议 ,觉得本文对你有帮助还请留下您的 “大拇指”,以示鼓励和支持!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值