2025年vue生成二维码并保存图片_vue实现扫描二维码

vue生成二维码并保存图片_vue实现扫描二维码一 生成简单的二维码 不带图片 1 引入插件 npm install qrcode save 2 页面中使用 页面中引入 import QRCode from qrcodejs2 methods qrcode this nextTick let qrcode new QRCode qrcode

一、生成简单的二维码(不带图片)
1.引入插件

npm install qrcode --save

2.页面中使用

页面中引入

import QRCode from "qrcodejs2";
methods: { 

qrcode() {

this.$nextTick(() => {

let qrcode = new QRCode("qrcode", {

width: 320,
height: 320, // 高度
text: 'http://www.baidu.com', // 二维码内容
render: "canvas", //设置渲染方式(有两种方式 table和canvas,默认是canvas)
background: "#f0f",
foreground: "#ff0",
src: this.img1, //二维码中间的图片
correctLevel: 0 // 容错率
});
});
},
mounted () {

this.qrcode()
}

二、中间带有图片的二维码
1.引入插件

npm install vue-qr --save

2.页面使用


  
:logoSrc="imageSrc" //中间图片地址
text="http://www.baidu.com" //二维码跳转地址
:size="400" //二维码大小
>
  
❤如果文章对您有所帮助,就在文章的右上角或者文章的末尾点个赞吧!(づ ̄ 3 ̄)づ
❤如果喜欢比卡丘分享的文章,就给比卡丘点个关注吧!(๑′ᴗ‵๑)づ╭❤~
❤鉴于个人经验有限,所有观点及技术研点,如有异议,请直接回复讨论(请勿发表攻击言论)
编程小号
上一篇 2025-01-27 22:21
下一篇 2025-03-11 22:27

相关推荐

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