vue 生成 二维码 qrCode 插件 使用 方法
2024-10-01 22:26:31
首先安装方法:(--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)
}
}
最新文章
- QC在win7下不能访问QC服务器介绍
- C#客户端的异步操作
- 【转】phpcms授课学习
- mysql 执行状态分析 show processlist
- WinForm 弹框确认后执行
- 范式(Oracle)
- 【HDOJ】3085 Nightmare Ⅱ
- jQuery delegate方法实现Ajax请求绑定事件不丢失
- ReactiveCocoa源码解读(一)
- angularjs之ui-bootstrap的Datepicker Popup实现双日期选择控件
- [原创]Nginx反向代理及负载均衡
- IIS6/7 配置操作
- Jquery weui picker 支持label和value
- 一针见血tomcat
- modelsin联合仿真
- Linux ifconfig 命令
- zabbix 利用python脚本实现短信告警
- 安卓开发环境配置之Windows+ADT+eclipse
- LaTeX技巧24:LaTeX常用命令集锦
- Flex自定义组件开发 - jackyWHJ
热门文章
- System.ArgumentException: 回发或回调参数无效。在配置中使用 <; pages enableEventValidation=";true";/>;
- 论C#的多继承
- IntelliJ IDEA添加过滤文件或目录(转)
- Leetcode697.Degree of an Array数组的度
- golang之常量
- Lunix文件的读写权限问题
- 非接触型手掌静脉识别 PalmSecure™
- css面试题总结(转)
- Path Sum 深度搜索
- 【Leetcode链表】旋转链表(61)