vue.js 二维码生成组件
npm install vue-qart --save
import VueQArt from 'vue-qart'
new Vue({
components: {VueQArt}
})
<vue-q-art :config="config" :downloadButton="downloadButton"></vue-q-art>
data () {
return {
msg: 'Welcome to Your Vue.js App',
config: {
value: 'https://www.baidu.com',
imagePath: './examples/assets/logo.png',
filter: 'color'
},
downloadButton: false
}
}
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | - | QR code表示的数据 |
imagePath | String | - | 合并图片的路径 |
filter | String | threshold | 定义一个图像过滤器,threshold或者color |
size | Number | 195 | 定义图像的大小,单位是px |
version | Number | 10 | QR code版本 (1 <= version <= 40) |
background | String | - | 生成背景色 |
fillType | String | scale_to_fit | 图片放置类型(fill 或者 scale to fit) |
动态生成二维码
cnpm install --save qrcodejs2
<template>
<div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="id"
label="id"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
fixed="right"
label="二维码"
width="100">
<template slot-scope="scope">
<el-button @click="checkEwmClick(scope.row)" type="text" size="small">查看</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
title="二维码"
:visible.sync="dialogQrcodeVisible"
width="30%"
:before-close="handleDialogQrcodeClose">
<div style="text-align:center; margin-left:auto; margin-right:auto;">
<div id="qrcodeshow" ref="qrCodeUrl"></div> <!-- 创建一个div,并设置id为qrcode -->
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogQrcodeVisible = false">关闭</el-button>
</span>
</el-dialog>
</div>
</template> <script>
import QRCode from 'qrcodejs2'// 引入qrcode
export default {
name: 'test',
mounted () {
// 需要先显示出来,然后再隐藏掉; 否则动态生成的二维码,第一次会报错,对象找不到。可能是跟初始化有关系,没有显示出来的时候并没有初始化HTML
this.dialogQrcodeVisible = false
},
data () {
return {
dialogQrcodeVisible: true,
tableData: [{
id: '1',
name: '百度',
address: '上海市普陀区金沙江路 1518 弄',
url: 'http://www.baidu.com'
}, {
id: '2',
name: 'QQ',
address: '上海市普陀区金沙江路 1517 弄',
url: 'http://www.qq.com'
}, {
id: '3',
name: '163.COM',
address: '上海市普陀区金沙江路 1519 弄',
url: 'http://www.163.com'
}, {
id: '4',
name: '淘宝',
address: '上海市普陀区金沙江路 1516 弄',
url: 'http://www.taobao.com'
}]
}
},
methods: {
checkEwmClick (url) {
let vm = this
vm.$nextTick(() => {
vm.dialogQrcodeVisible = true
let obj = document.getElementById('qrcodeshow')
obj.innerHTML = ''
vm.genarateQrcode(url)
})
},
handleDialogQrcodeClose () {
this.dialogQrcodeVisible = false
},
genarateQrcode (url) {
let qrcode = new QRCode(this.$refs.qrCodeUrl, {
width: 50,
height: 50,
text: url, // 二维码地址
colorDark: '#000',
colorLight: '#fff',
correctLevel: QRCode.CorrectLevel.H
})
console.log('qrcode = ' + JSON.stringify(qrcode))
}
}
}
</script>
vue.js 二维码生成组件的更多相关文章
- js 二维码生成 插件
<div onclick="liaotian()">点击生成二维码</div><div id="qrcode"></d ...
- 二维码生成插件qrious及网站扫码登录的一些理解
什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型. ...
- 二维码生成插件qrious
1.qrious是基于canvas的纯JS二维码生成插件 1.1什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的B ...
- 你不可错过的二维码生成与解析-java后台与前端js都有
1.二维码分类 二维条码也有许多不同的码制,就码制的编码原理而言,通常分为三种类型. 线性堆叠式二维码 编码原理: 建立在一维条码基础之上,按需要堆积成两行或多行. 图示: 矩阵式二维码 最常用编 ...
- JavaScript二维码生成——qrcode.js
在开发中,有时候,我们需要根据不同的内容来动态生成二维码,则可以使用qrcode.js这个小插件来实现. 1.qrcode.js文件内容: (1)未压缩(qrcode.js): /** * @file ...
- 网站开发进阶(十四)JS实现二维码生成
JS实现二维码生成 绪 项目开发原语:已然花费半天的时间,仍旧未能将二维码显示在订单中.但是可以在单个页面中显示二维码,结合到angularjs的控制器中就失效了,自己是真的找不到其中的原因了.费解! ...
- 二维码生成:使用 JavaScript 库QRCode.js生成二维码
QRCode.js:跨浏览器的javascript二维码生成库,支持html5的Canvas画布,没有任何依赖. Github 地址:https://github.com/davidshimjs/qr ...
- 免费开源的DotNet二维码操作组件ThoughtWorks.QRCode(.NET组件介绍之四)
在生活中有一种东西几乎已经快要成为我们的另一个电子”身份证“,那就是二维码.无论是在软件开发的过程中,还是在普通用户的日常中,几乎都离不开二维码.二维码 (dimensional barcode) , ...
- DotNet二维码操作组件ThoughtWorks.QRCode
DotNet二维码操作组件ThoughtWorks.QRCode 在生活中有一种东西几乎已经快要成为我们的另一个电子"身份证",那就是二维码.无论是在软件开发的过程中,还是在普通用 ...
随机推荐
- Fundebug累计处理1000万条错误事件!
摘要上线半年时间,Fundebug累计处理1000万条错误事件.10000000啊! 自从去年双11[正式上线](https://blog.fundebug.com/2016/11/11/fundeb ...
- Promise是Monad吗?
译者按: 近年来,函数式语言的特性都被其它语言学过去了. 原文: Functional Computational Thinking — What is a monad? 译者: Fundebug 为 ...
- xshell工具source导入几个G的数据库
直奔主题 xshell工具source导入几个G的数据库 1.先把sql文件通过ftp或者winscp上传到服务器对应站点根目录,如图所示 2.进入xshell界面,进入数据库之前一定设定编码,否者会 ...
- angular ng-file-upload
传送门:https://github.com/danialfarid/ng-file-upload#install <script src="angular(.min).js" ...
- 【读书笔记】iOS-使用钥匙串保护数据
一,将应用从设备上删除时,并不会删除其钥匙串项,这使得调试工作困难得多.模拟器有一个Reset Contents and Settings选项,可用于将钥匙串项移除.因此,强烈建议在模拟器上确定Key ...
- 数据筛选和API优化
筛选数据 需求:如果数据库中存在OrderNum相同,且IsDefault不同的记录,那么IsDefault值为0的记录将替换值为1的记录(IsDefault值为1的记录不展示). 由于查出来的数据不 ...
- 不需要再手写 onSaveInstanceState 了,因为你的时间非常值钱
如果你是一个有经验的 Android 程序员,那么你肯定手写过许多 onSaveInstanceState 以及 onRestoreInstanceState 方法用来保持 Activity 的状态, ...
- Kotlin入门(21)活动页面的跳转处理
Activity的活动页面跳转是App最常用的功能之一,在前几章的demo源码中便多次见到了,常常是点击界面上的某个按钮,然后跳转到与之对应的下一个页面.对于App开发者来说,该功能的实现非常普通,使 ...
- python安装pbkdf2 遇到错误TypeError: __call__() takes exactly 2 arguments (1 given)
python安装模块时遇到如下错误, import packaging.requirements File "/usr/lib/python2.7/site-packages/packagi ...
- pycharm 中按照文档引包方式,引包错误
* python使用pycharm ide,如果电脑上有多个解释器的,在项目解释器配置的应该是当前使用的解释器: * 可以把当前使用的解释器目录添加到系统环境变量中,这样就不会报错了 另外,如果目录中 ...