Vue中将网址、动态网址转为二维码

1、首先需要安装相关的依赖包

npm install qrcodejs2 --save

或者

npm install qrcode2 --save

这里选择第二种方式进行安装，如图：

2、template中往需要展示的地方写入

<div id="qrcode" ref="qrcode"></div>

如图： class是自定义样式，不是必写参数。

3、script的methods中写入函数

qrcodeScan() { // 生成二维码

      findShopInfo().then(res => {

      new QRCode(document.getElementById('qrcode'), {

          text: res.data.accessUrl, // 二维码地址

          width: 100, // 二维码宽度

          height: 100, // 二维码高度

          correctLevel: QRCode.CorrectLevel.H // 二维码容错级别 H M L

        })

      })

    }

二维码地址：res.data.accessUrl，是后台提供的。如果是定死的链接网址，可以将改text

text:'https://www.cnblogs.com', // 二维码地址

4、在mounted中调用这个二维码函数就完成了二维码展示

mounted() {

    this.qrcodeScan()

  },

本人实现效果如下图：

希望这篇文章可以帮到你！

本文参考博客链接：https://blog.csdn.net/liurong1028/article/details/84849813 、 https://blog.csdn.net/xuaner8786/article/details/82250830

巴特西

Vue中将网址、动态网址转为二维码

最新文章

热门文章