一、安装包
npm install qrcodejs2 --save
二、应用
<!--写在vue对应的元素里-->
<div class="qrcode" ref="qrcodeContainer"></div>
<script>
import QRCode from 'qrcodejs2'
// vue对象的一个method
showQRCode(){
var qrcode = new QRCode(this.$refs.qrcodeContainer, {
text: 'https://wallimn.iteye.com',
width: 100,
height: 100,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
});
}
</script>
三、注意
如果使用对话框显示二维码,有时会由于html元素还没有创建,导致生成二维码时报对象不存在的错误。这时可以使用nextTick来处理。
showQRCode(){
this.$nextTick(()=>{
var qrcode = new QRCode(this.$refs.qrcodeContainer, {
text: 'https://wallimn.iteye.com',
width: 100,
height: 100,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
}
}
分享到:
相关推荐
最近用QRCode.js 生成二维码之后,发现在小米和华为手机的微信上面页面长按识别不了,苹果和其他手机浏览器是正常的。qrcode在页面生成会生成一个canvas标签和一个img标签,在电脑浏览器上调试的时候发现生成二维码...
本项目是使用 qrcodejs2 生成二维码图片 然后使用 html2canvas 将生成的二维码图片和html文本结构合成为base64图片数据 让后展示下载分享 本项目核心代码在 QRcode-html2canvas\src\views-> Qrcode.vue 中,能...
二维码只是vue.js中的qrcode生成器
通过指定链接生成动态二维码,便于分享链接和保存所需要的资源,增加边框样式效果,如有需要,欢迎下载交流。
新版之后的js批量生成二维码!!!之前的上传的还没有改善, 没将canvas转成img 的url (主要是快下班啦!不好意思)
vue-qrcode:一个用于生成二维码的Vue组件
生成二维码加文字,加图片,加logo,生成二维码加文字,加图片,加logo,生成二维码加文字,加图片,加logo,生成二维码加文字,加图片,加logo,生成二维码加文字,加图片,加logo,生成二维码加文字,加图片,加logo,...
qrcode.js 二维码生成实例,前台 js 实现二维码展示。
引用qrcode.js生成二维码并提供下载功能(使用简单,功能强大,不用写任何样式,一键引入js文件即可)
QRCodeGitHub:纯前端 HTML / Vue :二维码:生成、扫描、识别、解析、扫一扫该Demo功能共分为:HTML版 和 Vue版 两个版本!不依赖任何关于微信环境、微信JS-SDK,微信受权等!支持二维码生成,实时动态生成和渲染!...
vue_qrcodes是基于qrcode.js二维码封装的vue组件。 本资源提供了该依赖的使用demo及其使用说明,希望可以帮到各位开发者
QRCode登录 二维码扫码登录;服务器端,网页前端,移动端原始码; 项目介绍 一个能够实现扫码登录的demo,不妨小小Star一下吧>。...说明:项目基于Vue.js开发,通过vue-cli脚手架进行构建,使用了Vue Router,
一个前端生成二维码的JS库,小程序生成二维码分享适用。
我自己写的angularjs的二维码代码
arale-qrcode是一个便捷生成二维码的开源前端js库,可安装可本地,这是他的本地使用的技js文件,适合那些不方便安装第三方库的老项目 支持自定义中心logo,生成结果为svg,可直接填充到div内,或通过html2canvas下载...
支持自定义二维码渲染规则,可通过 getModules 方法得到矩阵信息后,自行实现canvas渲染二维码,如随机颜色、圆点、方块、块与块之间的间距等,详情见示例中的 custom。 支持nvue生成,但暂不支持保存。 联系方式:...
这是一个可自己生成二维码的vue插件,只需要网页的链接就可以使用了,使用方法网上有很多,大家可以查找一下,很方便很简单!
该应用程序是使用nativescript,vue,nativescript-zxing(生成二维码)和nativescript-barcodescanner(使用相机读取条形码)构建的连拍家myinfo 二维扫描仪我的qr产品特点Qr scanningQr generationpersistent ...
ArtQRCode是基于qrcode.js的封装,支持以图片元素为基本单元的二维码放置。基本用法< div xss=removed> < / div >< script > var options = { text : "https://github.com/252860883/ArtQRCode" , width : ...