vue 生成 二维码 qrCode 插件 使用 方法
首先安装方法：（--save 参数会改变package.json 推荐使用 下次直接install就行了）
npm install --save qrcode
然后项目使用：
import QRCode from 'qrcode'
然后使用方法：
html 使用 -
<!-- index.html -->
<html>
<body>
<canvas id="canvas"></canvas>
<script src="bundle.js"></script>
</body>
</html>
// index.js -> bundle.js
var QRCode = require('qrcode')
var canvas = document.getElementById('canvas') QRCode.toCanvas(canvas, '二维码内容xxxxxx', function (error) {
if (error) console.error(error)
console.log('success!');
})
NodeJS
var QRCode = require('qrcode')
QRCode.toDataURL('二维码内容xxxxxx!', function (err, url) { console.log(url) })
ES6/ES7
1.异步方式
import QRCode from 'qrcode' // With promises
QRCode.toDataURL('二维码内容xxxxxx!') .then(url => { console.log(url) }) .catch(err => { console.error(err) })
2.同步方式
// With async/await
let text = 'xxxxxxxx';
const generateQR = async text => {
try {
console.log(await QRCode.toDataURL(text))
} catch (err) {
console.error(err)
}
}
vue 生成 二维码 qrCode 插件 使用 方法的更多相关文章
- VUE 生成二维码插件
原文:https://www.jianshu.com/p/496fd1cbee8d npm install qrcodejs2 --save 页面中引入 dom 结构 JS 方法编写 export d ...
- js生成二维码 qrcode
js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...
- Java生成二维码QRCode.jar
所需jar包:QRCode.jar:http://download.csdn.net/detail/xuxu198899223/7717745 package ewm; import java.awt ...
- php生成二维码的插件phpqrcode
参考网址: http://www.thinkphp.cn/topic/7749.html http://blog.csdn.net/stxyc/article/details/44650971 php ...
- VUE 生成二维码(qrcodejs)
1. 概述 1.1 引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行 ...
- 【C#/WPF】.Net生成二维码QRCode的工具
先马 http://qrcodenet.codeplex.com/ 使用该工具WPF生成二维码的简单例子: 前台XAML准备一个Image控件显示二维码. string qrcodeStr = &qu ...
- vue 生成二维码+截图
链接生成二维码 1.npm安装 npm install --save qrcodejs2 2.引入 import QRCode from 'qrcodejs2' 3.生成二维码 new QRCode( ...
- 微信支付支付宝支付生成二维码的方法（php生成二维码的三种方法）
如果图简单,可以用在线生成 http://pan.baidu.com/share/qrcode?w=150&h=150&url=http://www.xinzhenkj.com 最简单 ...
- 使用PHP生成二维码的两种方法(带logo图像)
一.利用Google API生成二维码 Google提供了较为完善的二维码生成接口,调用API接口很简单,以下是调用代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
随机推荐
- 2017年2月27日Unicorn, US (148) and China (69), followed by the U.K. (10), India (9), Israel (5) and Germany (5).
Revisiting The Unicorn Club Get to know the newest crowd of billion dollar startups In 2013, when Ai ...
- 从0开始学习 GitHub 系列之「04.向GitHub 提交代码」
之前的这篇文章「从0开始学习 GitHub 系列之「Git速成」」相信大家都已经对 Git 的基本操作熟悉了,但是这篇文章只介绍了对本地 Git 仓库的基本操作,今天我就来介绍下如何跟远程仓库一起协作 ...
- java 操作CLOB类型数据
clob类型,但对于这个类型处理起来还是比较麻烦的,varchar2长度为4000bytes,如果varchar2能满足楼主的需求,建议使用varchar2,下面提供了在Java 中读取clob类型的 ...
- jsp之jstl（展示所有商品、重写登录案例）
jsp之jstl jstl: jsp标准的标签库语言,apache的,是用来替代java脚本 使用步骤: 1.导入jar包 (jstl.jar和standard.jar) 2.在页面上导入标签库 &l ...
- 2018-12-27-WPF-从文件创建图片的方法
title author date CreateTime categories WPF 从文件创建图片的方法 lindexi 2018-12-27 11:37:46 +0800 2018-12-27 ...
- thinkphp---display与fetch区别
区别: ① display方法直接输出模板文件渲染后的内容,fetch方法是返回模板文件渲染后的内容 ② 有时候我们不想直接输出模板内容,而是希望对内容再进行一些处理后输出, 就可以使用fetch方法 ...
- 异步操作async await
async函数的特点: 语义化强 里面的await只能在async函数中使用 await后面的语句可以是promise对象.数字.字符串等 async函数返回的是一个Promsie对象 await语句 ...
- NSArray 查询数组中的对象
1.NSString 对象 NSArray *array =@["123", @"234" , @"345"]; NSPredicate ...
- More Effective C++: 04效率
16:牢记80-20准则 80-20准则说的是大约20%的代码使用了80%的程序资源:大约20%的代码耗用了大约80%的运行时间:大约20%的代码使用了80%的内存:大约20%的代码执行80%的磁盘访 ...
- laravle 事务
DB::beginTransaction(); try{ $name = 'abc'; $result1 = Test::create(['name'=>$name]); ...