前端vue生成二维码带logo并且可以点击下载保存_vue实现扫描二维码

下载插件：npm install vue-qr

<template>

<div class=”sg-qrcode”>

<vue-qr

:text=”qrcodeText”

:correctLevel=”3″

:size=”250″

:margin=”10″

colorDark=”#000″

colorLight=”white”

backgroundColor=”white”

backgroundDimming=”white”

:logoSrc=”require(‘@/assets/logo.png’)”

:logoScale=”.2″

:logoMargin=”5″

logoBackgroundColor=”white”

></vue-qr>

</div>

</template>

<script>

import vueQr from “vue-qr”; // 引入二维码生成组件

export default {

components: {

vueQr // 二维码生成组件

},

data() {

return {

qrcodeText: “测试二维码” //二维码内容（扫码识别后需要访问的网址）

};

}

// 属性说明：

// text 编码的内容（支持文字、网址）

// correctLevel 容错级别 0-3（容错级别越高，代表遮住二维码部分越多，依然可以识别）

// size 尺寸, 长宽一致, 包含外边距（推荐20px）

// margin 二维码图像的外边距, 默认20px

// colorDark 实点的颜色（默认黑色）

// colorLight 空白区的颜色（默认白色）

// bgSrc 嵌入的背景图地址（支持png、jpg）

// gifBgSrc 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能

// backgroundColor 背景色（默认白色）

// backgroundDimming 叠加在背景图上的颜色, 在解码有难度的时有一定帮助（默认白色）

// logoSrc 嵌入至二维码中心的 LOGO 地址（支持png、jpg）

// logoScale 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin),（默认 0.2）

// logoMargin LOGO标识周围的空白边框, 默认为0（推荐5px）

// logoBackgroundColor Logo 背景色,需要设置 logo margin（默认白色）

};

</script>

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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/186273.html原文链接：https://javaforall.cn