vue 使用QRcode生成二维码或在线生成二维码
参考:https://blog.csdn.net/zhuswy/article/details/80267748
1.安装qrcode.js
npm install qrcodejs2 --save
2.页面中引入
import QRCode from 'qrcodejs2'
3.页面使用
<div id="qrcode" ref="qrcode"></div>
methods:{
qrcode () {
let qrcode = new QRCode('qrcode', {
width: 232, // 设置宽度
height: 232, // 设置高度
text: 'https://baidu.com'
})
}
}
/*
@ 在需要调用的地方 这样必须这样调用 否则会出现 appendChild null 就是id为qrcode的dom获取不到 返回结果为null
*/
this.$nextTick (function () {
this.qrcode();
})
更简单直接的方法:
src = "http://qr.topscan.com/api.php?bg=ffffff&fg=000000&text=" + code; //code为券码
vue 使用QRcode生成二维码或在线生成二维码的更多相关文章
- 在线生成二维码的API接口
现在很多大网站都有这样的一个功能,使用手机扫描一下网页上的二维码便可快速在手机上访问网站.想要实现这样的功能其实很简单,下面麦布分享几个在线生成网址二维码的API接口.都是采用http协议接口,无需下 ...
- 推荐六个在线生成网址二维码的API接口
现在很多大网站都有这样的一个功能,使用手机扫描一下网页上的二维码便可快速在手机上访问网站.想要实现这样的功能其实很简单,下面麦布分享几个在线生成网址二维码的API接口.都是采用http协议接口,无需下 ...
- C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码
本文介绍在 C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码.网上文章大多只是简单介绍内置参数的设置,根据我的使用目的,增加了自定义目标二维码图片尺寸和白边 ...
- 【转】C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码
本文介绍在 C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码.网上文章大多只是简单介绍内置参数的设置,根据我的使用目的,增加了自定义目标二维码图片尺寸和白边 ...
- QrCode C#生成二维码 及JavaScript生成二维码
一 C#的二维码 示例: class Program { static void Main(string[] args) { QrEncoder qrEncoder = new QrEncode ...
- QRCode二维码生成方案及其在带LOGO型二维码中的应用(1)
原文:QRCode二维码生成方案及其在带LOGO型二维码中的应用(1) 提要:很多公司为商业宣传之需,常将企业LOGO加入二维码中,但如果LOGO遮挡区域足够地大,二维码就变得无法识别.那么,有没有一 ...
- QRCode二维码生成方案及其在带LOGO型二维码中的应用(2)
原文:QRCode二维码生成方案及其在带LOGO型二维码中的应用(2) 续前:QRCode二维码生成方案及其在带LOGO型二维码中的应用(1) http://blog.csdn.net/johnsu ...
- vue 把后端返回的图片和url链接生成的二维码用canvas 合成一张图片
H5 页面在做某个活动的时候,有两种分享方式,一种是链接分享,一种是图片分享. 链接分享的话,如果是在微信里,就可引导用户利用微信浏览器自带的分享,根据sdk设置分享标题简介链接缩略图即可. 图片分享 ...
- jquery.qrcode.js生成二维码(前端生成二维码)
官网地址:http://jeromeetienne.github.io/jquery-qrcode/ 第一步引入插件: <script type='text/javascript' src='h ...
随机推荐
- Es567严格模式
Es5 严格模式 http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html 除了正常运行模式(混杂模式),ES5添加了第二种 ...
- a^a^a^a^a^a^a^a^a
a^a^a^a是从前向后算,也就是a^(a^3)
- 导入导出sql结构和数据
导入导出sql结构和数据
- CSS——优雅降级和渐进增强
什么是渐进增强(progressive enhancement).优雅降级(graceful degradation)呢? 渐进增强 progressive enhancement: 针对低版本浏览器 ...
- poj 1742 Coins(二进制优化多重背包)
传送门 解题思路 多重背包,二进制优化.就是把每个物品拆分成一堆连续的\(2\)的幂加起来的形式,然后把最后剩下的也当成一个元素.直接类似\(0/1\)背包的跑就行了,时间复杂度\(O(nmlogc) ...
- Android Support Library 学习入门
0. 文前闲话 作为一个由原生桌面应用程序开发者(VC.Delphi)转行的Android菜鸟,虐心的事真是数不胜数:安装个开发工具下载个SDK需要整整一夜:早晨一上班点开Android Studio ...
- HDU-1698-Just a Hook-区间更新+线段树成段更新
In the game of DotA, Pudge’s meat hook is actually the most horrible thing for most of the heroes. T ...
- QT 在QTabWidget中设置一些调色板
这次所做的项目中需要用到如下功能,点击tableWidget中的子项,将会弹出颜色选值对话框,实现子项的改变,如下图所示: 1.首先,将自己定制的调色板放入tableWidget中 for (int ...
- 4_7.springboot2.x嵌入式servlet容器自动配置原理
概述 Spring Boot对所支持的Servlet Web服务器实现做了建模抽象: Servlet容器类型 WebServer模型接口 WebServer工厂实现类 Tomcat Tomca ...
- python pywin32学习笔记
参考博客链接 https://blog.csdn.net/polyhedronx/article/details/81988948 参考博客链接 https://www.cnblogs.com/zha ...