Vue生成二维码_vue实现扫描二维码

Vue生成二维码_vue实现扫描二维码效果代码npminstallvue-qr–save<template><divclass=”sg-qrcode”><vue-qr:text=”qrcodeText”:correctLevel=”3″:size=”250″:margin=”10″colorDark=”#2ba245″

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

效果

在这里插入图片描述

代码

npm install vue-qr --save

<template>
    <div class="sg-qrcode">
        <vue-qr :text="qrcodeText"
                :correctLevel="3"
                :size="250"
                :margin="10"
                colorDark="#2ba245"
                colorLight="white"
                backgroundColor="white"
                backgroundDimming="white"
                :logoSrc="require('@/assets/login/qrcode-logo.jpg')"
                :logoScale=".2"
                :logoMargin="5"
                logoBackgroundColor="white"
        ></vue-qr>
    </div>
</template>

<script>
    import vueQr from "vue-qr"; //引入二维码生成组件
    export default {
        components: {
            vueQr //二维码生成组件
        },
        data() {
            return {
                qrcodeText: "舒工请你付款来了", //二维码内容(扫码识别后需要访问的网址)
                amount: 168//金额
            };
        }
    };
</script>

属性说明:

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(默认白色)

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/186359.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • adminlte ajax,AdminLTE

    adminlte ajax,AdminLTEReminder!AdminLTEusesallofBootstrap3components.It’sagoodstarttoreviewtheBootstrapdocumentationtogetanideaofthevariouscomponentsthatthisdocumentationdoesnotcover.Tip!Ifyoug…

  • 使用CityScapes数据集训练实例分割网络YOLACT

    使用CityScapes数据集训练实例分割网络YOLACT#2020开年第一篇,谁能预料新年伊始的世界如此脆弱,中国疫情肆虐,美伊箭拔弩张,英国愤懑脱欧,儿时的偶像科比和女儿也不幸离世,生命之渺小,生活之曲折,兄弟们,要充满阳光地活着啊,人间,值得。:-)今天还是鄙人生日,愿世间多点爱,与和平。上一篇介绍了博主用CityScapes数据集提取了五类实例,并转换成了COCO数据集的标注格式(将CityScapes数据集转换为COCO格式的实例分割数据集…

  • docker容器获取宿主机IP「建议收藏」

    docker容器获取宿主机IP「建议收藏」1.bridge模式启动.通过环境变量–envHOST_IP=xxxx,通过环境变量$HOST_IP获取将主机/proc目录挂载到容器中(未验证)2.host模式启动通过iproute获取

  • jquery插件autoComplete自动弹出

    jquery插件autoComplete自动弹出

  • 部署禅道至外网

    部署禅道至外网结论:采用Cpolar映射工具和netsh命令netsh命令可以将对本地/局域网的某个端口的请求转发给本地/局域网的另一端口接收处理,假设利用Cpolar映射工具将本地的12345端口映射到外网,再利用netsh命令将本地12345端口转发到192.168.10.188的8000端口,这样,我在外网用http请求本地12345端口时,实际上是在请求禅道(192.168.10.188:8000)网址结论:可行工具:cpolar内网穿透工具和一台内网开着的电

  • JavaScript进阶(八)JS实现图片预览并导入服务器功能

    JavaScript进阶(八)JS实现图片预览并导入服务器功能JS实现导入文件功能赠人玫瑰,手留余香。若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉!(PS:此篇博文是自己在午饭时间所写,为此没吃午饭,这就是程序猿的生活。)项目开发过程中,需要实现文件上传功能。借此机会学习之。使用HTML中现有的inputtype“file”可以支持这一功能。如下所示:

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号