深入了解Vue使用vue-qr生成二维码的方法
目录
- npm下载
- 步骤
- (1)导入
- (2)vue-qr参数
- 示例
- 总结
“二维码”的英文是“QR Code”,“QR”是“Quick Response”的缩写,反映出这种二维码具有“超高速识读”的特点。“Quick Response Code”也就是“快速响应码”。
npm下载
npm install vue-qr --save
下载成功:
步骤
(1)导入
import VueQr from 'vue-qr'
(2)vue-qr参数
text
二维码,即扫描二维码后跳转的页面size
二维码大小margin
二维码图像的外边距, 默认 20pxbgSrc
嵌入的背景图地址logoSrc
嵌入至二维码中心的 LOGO 地址logoScale
中间图的尺寸dotScale
二维码的点的大小colorDark
实点的颜色(注意:和colorLight一起设置才有效)colorLight
空白的颜色(注意:和colorDark一起设置才有效)autoColor
若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true
示例
<template> <div> <vue-qr :text="imgUrl" :size="250" :logoSrc="logo" :logoScale="0.2"> </vue-qr> </div> </template> <script> import VueQr from 'vue-qr' export default { name:'', components:{ VueQr, }, data() { return { imgUrl: 'https://baidu.com', logo: require('@/assets/tea_128.png'), } }, methods:{ }, } </script>
结果:
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!
相关推荐
-
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
这几天做个了项.就是微信扫描二维码的然后进入公众号网页巴拉巴拉的,然后就很顺利的遇到了在安卓端扫码的时候,顺利的一塌糊涂,然后到了苹果端的时候,就只能出现一个保存图片,然后就写一下记录一下这问题的解决方法. 问题 机型:iphone 7p 这里的二维码是一张图片,微信返回的图片,具体下图 然后是正常情况下.当我们开始扫码的时,应该是这个样子 这个是正常的,但是在苹果端的时候就懵了,下面的菜单就只有一个保存图片.那么如何解决呢,请看下面. 解决方案 解决方案其实有两种. 使用 qrcodeJs 就
-
Vue——前端生成二维码的示例
与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm npm install --save qrcodejs2 import import QRCode from 'qrcodejs2' 使用 <div class="qrcode" ref="qrCodeUrl"></div> <script
-
在Vue中用canvas实现二维码和图片合成海报的方法
在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载 简单来说,就是利用canvas将同等比例的二维码在图片上叠加,生成海报 1. 设置相应比例 一般来说海报背景都是固定的,可以直接放在public文件夹,二维码可根据后台返回数据,也可用canvas生成,在此不多赘述 import posterBgImg from '../public/images/poster_bg.png';// 海报底图 import qrcodeImg from '../public/images/qr
-
通过vue方式实现二维码扫码功能
提示 这个插件只能在https协议下才能访问,http协议不好使,最好用vue2,vue3容易报错!!!!! 描述 通过vue的方式,实现扫码功能 参考文档:vue-qrcode-reader去官网–>官方文档 效果展示 实现步骤: 步骤一(安装插件) npm install --save vue-qrcode-reader 步骤二(创建组件) 因为可能多个页面都会用到,所以弄成了组件 (1)在src下面的components创建qrcode.vue (2)代码实现 // qrcode.vue
-
vue实现二维码扫码功能(带样式)
需求: 利用vue实现二维码扫描: 插件: QRCodeReader: 插件下载 npm install --save vue-qrcode-reader 注意: 需要在https协议下才可以调用相机,实现扫码. 可以通过配置vue.config.js中的devServer:{https:true} 或参照前文章 前端使用Nuxt框架,配置本地https访问 配置本地证书 <template> <div> <p class="error">{{ er
-
vue中实现动态生成二维码的方法
最近项目中有个裂变分享的需求,需要在页面中根据分享人的身份动态生成二维码图片放置在页面中,所以研究了一下这个功能的实现,同时把实现过程记录如下: 1.引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行引用设置. 2.引入使用 import QRCode from 'qrcodejs2'; 备注:在main中设置全局可使用 Vue.prototype.qrCode 3.
-
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
本文实例讲述了Python基于QRCode实现生成二维码的方法.分享给大家供大家参考,具体如下: QR码是一种矩阵码,或二维空间的条码,1994年由日本Denso-Wave公司发明.QR是英文Quick Response的缩写,即快速反应的意思,源自发明者希望QR码可让其内容快速被解码.QR码常见於日本,并为目前日本最流行的二维空间条码.QR码比普通条码可储存更多资料,亦无需像普通条码般在扫描时需直线对准扫描器. qrcode是Python的第三方模块,依赖于Python 图像库:PIL(Pyt
-
Python实现将文本生成二维码的方法示例
本文实例讲述了Python实现将文本生成二维码的方法.分享给大家供大家参考,具体如下: #coding:utf-8 ''' Python生成二维码 v1.0 主要将文本生成二维码图片 测试一:将文本生成白底黑字的二维码图片 测试二:将文本生成带logo的二维码图片 ''' __author__ = 'Xue' import qrcode from PIL import Image import os #生成二维码图片 def make_qr(str,save): qr=qrcode.QRCode
-
ASP.NET生成二维码的方法总结
本文实例总结了ASP.NET生成二维码的方法.分享给大家供大家参考,具体如下: 分享一例c#生成二维码的代码,直接引用ThoughtWorks.QRCode.dll 类生成二维码,有需要的朋友参考下. 方法1.直接引用ThoughtWorks.QRCode.dll 类,生成二维码. 代码示例: ThoughtWorks.QRCode.Codec.QRCodeEncoder encoder = new QRCodeEncoder(); encoder.QRCodeEncodeMode = QRCo
-
Symfony生成二维码的方法
本文实例讲述了Symfony生成二维码的方法.分享给大家供大家参考,具体如下: 现在网上能搜到很多关于使用PHP生成二维码的例子,主要是两种方法: 第一种:google开放api,如下: $urlToEncode="http://blog.it985.com"; generateQRfromGoogle($urlToEncode); function generateQRfromGoogle($chl, $widhtHeight = '150', $EC_level = 'L', $m
-
Python及Django框架生成二维码的方法分析
本文实例讲述了Python及Django框架生成二维码的方法.分享给大家供大家参考,具体如下: 一.包的安装和简单使用 1.1 用Python来生成二维码很简单,可以看 qrcode 这个包: pip install qrcode qrcode 依赖 Image 这个包: pip install Image 如果这个包安装有困难,可选纯Python的包来实现此功能,见下文. 1.2 安装后就可以使用了,这个程序带了一个 qr 命令: qr 'http://www.ziqiangxuetang.c
-
PHP基于phpqrcode类生成二维码的方法详解
本文实例讲述了PHP基于phpqrcode类生成二维码的方法.分享给大家供大家参考,具体如下: 使用PHP语言生成二维码,还是挺有难度的,当然调用生成二维码图片的接口(比如:联图网http://www.liantu.com/的接口)除外,如果自己写代码生成,真的无从下手.然而,我们可以使用phpqrcode这个现成的类文件,PHP二维码生成类库,利用它可以轻松生成二维码. 前期准备: 1.phpqrcode类文件下载,下载地址:https://sourceforge.net/projects/p
-
nodejs实现超简单生成二维码的方法
本文实例讲述了nodejs实现超简单生成二维码的方法.分享给大家供大家参考,具体如下: 一开始使用node-qrcode(https://github.com/soldair/node-qrcode),结果安装的时候需要安装python,且不支持python3.0以上,安装python2.0的时候又需要安装其他的环境,所以放弃了. 最后选择了一个小众的插件qr-image(https://github.com/alexeyten/qr-image) 前台页面如下 views/index.ejs
-
thinkphp3.2框架集成QRcode生成二维码的方法分析
本文实例讲述了thinkphp3.2框架集成QRcode生成二维码的方法.分享给大家供大家参考,具体如下: 一.下载QRcode源代码 https://sourceforge.net/projects/phpqrcode/files/releases/ 使用phpqrcode必须开启GD2扩展,phpqrcode提供了一个png()方法,通过该方法,我们可以生成自已需要的二维码.该函数定义如下: public static function png( $text, $outfile = fals
-
PHP基于phpqrcode类生成二维码的方法示例详解
HP QR Code是一个PHP二维码生成类库,利用它可以轻松生成二维码,官网提供了下载和多个演示demo,查看地址: http://phpqrcode.sourceforge.net/ 下载官网提供的类库后,只需要使用phpqrcode.php就可以生成二维码了,当然您的PHP环境必须开启支持GD2. phpqrcode.php提供了一个关键的png()方法,其中 参数$text表示生成二位的的信息文本: 参数$outfile表示是否输出二维码图片 文件,默认否: 参数$level表示容错率,
随机推荐
- 不错的一篇关于javascript-prototype继承
- js实现四舍五入完全保留两位小数的方法
- MySQL Order By用法分享
- js判断主流浏览器类型和版本号的简单实现代码
- ASP.NET 图片防盗链的实现原理分析
- php实现图片上传并进行替换操作
- asp 防止SQL注入代码
- Vue.js常用指令的使用小结
- JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
- 不同版本IE使用不同css(css条件注释语句用法)
- jQuery 移动端artEditor富文本编辑器
- jquery ui dialog ie8出现滚动条的解决方法
- SQL Server数据库按百分比查询出表中的记录数
- jquery动态改变form属性提交表单
- 微信小程序视图template模板引用的实例详解
- ie与firefox下的event使用说明与详细区别
- C#几种获取网页源文件代码的实例
- PHP htmlspecialchars() 函数实例代码及用法大全
- 原生js实现针对Dom节点的CRUD操作示例
- 基于anaconda下强大的conda命令介绍