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 ...
随机推荐
- 搭建HDFS HA
搭建HDFS HA 1.服务器角色规划 hd-01(192.168.1.99) hd-02 (192.168.1.100) hd-03 (192.168.1.101) NameNode NameNod ...
- mysql 存储过程学习
存储过程框架 DEMILITER $$ -- 重定义符 DROP PROCEDURE IF EXISTS store_procedure$$ -- 如果存在此名的存储过程,先删除 CREATE PRO ...
- Java中的API方法总结
API方法总结 File file = new File(path); #创建文件对象,指向一个目录 file.exists() #判断目录或者文件是否存在 File[] files = file.l ...
- 「题解」:$d$
问题 A: $d$ 时间限制: 1 Sec 内存限制: 512 MB 题面 题面谢绝公开. 题解 赛时切掉了然而过程十分曲折. 贪心思路很好想.然而一开始错误以为是单峰.其实几个峰都有可能. 开场写 ...
- Ubuntu 更新错误修复大全
合并列表问题 当你在终端中运行更新命令时,你可能会碰到这个错误“合并列表错误”,就像下面这样: E:Encountered a section with no Package: header, E:P ...
- python相关软件安装流程图解——Windows下安装Redis以及可视化工具——Redis-x64-3.2.100——redis-desktop-manager-0.9.3.817
https://www.2cto.com/database/201708/666191.html https://github.com/MicrosoftArchive/redis/releases ...
- XML、JSON、ProtocolBuffer特点比较
XML JSON PB Lua 数据结构支持 复杂结构 简单结构 较复杂结构 复杂结构 数据保存方式 文本 文本 二进制 文本 数据保存大小 大 一般 小 一般 解析效率 慢 一般 快 稍快 语言支持 ...
- day20_函数的闭包 与 装饰器
#!/usr/bin/env python # -*- coding:utf-8 -*- # # 一些文章 # https://www.cnblogs.com/Vae1242/p/6944338.ht ...
- Python 函数与内置函数
1.函数的基本定义 def 函数名称(参数) 执行语句 return 返回值 def : 定义函数的关键字: 函数名称:顾名思义,就是函数的名字,可以用来调用函数,不能使用关键字来命名,做好是用这个函 ...
- PAT甲级——A1127 ZigZagging on a Tree【30】
Suppose that all the keys in a binary tree are distinct positive integers. A unique binary tree can ...