安装
通过NPM安装
npm install vue-qart --save
插件应用
将vue-qart引入你的应用
import VueQArt from 'vue-qart'

new Vue({
components: {VueQArt}
})
在你的应用中这样使用vue-qart
<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 二维码生成组件的更多相关文章

  1. js 二维码生成 插件

    <div onclick="liaotian()">点击生成二维码</div><div id="qrcode"></d ...

  2. 二维码生成插件qrious及网站扫码登录的一些理解

    什么是二维码 ​ 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型. ...

  3. 二维码生成插件qrious

    1.qrious是基于canvas的纯JS二维码生成插件 1.1什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的B ...

  4. 你不可错过的二维码生成与解析-java后台与前端js都有

    1.二维码分类   二维条码也有许多不同的码制,就码制的编码原理而言,通常分为三种类型. 线性堆叠式二维码 编码原理: 建立在一维条码基础之上,按需要堆积成两行或多行. 图示: 矩阵式二维码 最常用编 ...

  5. JavaScript二维码生成——qrcode.js

    在开发中,有时候,我们需要根据不同的内容来动态生成二维码,则可以使用qrcode.js这个小插件来实现. 1.qrcode.js文件内容: (1)未压缩(qrcode.js): /** * @file ...

  6. 网站开发进阶(十四)JS实现二维码生成

    JS实现二维码生成 绪 项目开发原语:已然花费半天的时间,仍旧未能将二维码显示在订单中.但是可以在单个页面中显示二维码,结合到angularjs的控制器中就失效了,自己是真的找不到其中的原因了.费解! ...

  7. 二维码生成:使用 JavaScript 库QRCode.js生成二维码

    QRCode.js:跨浏览器的javascript二维码生成库,支持html5的Canvas画布,没有任何依赖. Github 地址:https://github.com/davidshimjs/qr ...

  8. 免费开源的DotNet二维码操作组件ThoughtWorks.QRCode(.NET组件介绍之四)

    在生活中有一种东西几乎已经快要成为我们的另一个电子”身份证“,那就是二维码.无论是在软件开发的过程中,还是在普通用户的日常中,几乎都离不开二维码.二维码 (dimensional barcode) , ...

  9. DotNet二维码操作组件ThoughtWorks.QRCode

    DotNet二维码操作组件ThoughtWorks.QRCode 在生活中有一种东西几乎已经快要成为我们的另一个电子"身份证",那就是二维码.无论是在软件开发的过程中,还是在普通用 ...

随机推荐

  1. Fundebug累计处理1000万条错误事件!

    摘要上线半年时间,Fundebug累计处理1000万条错误事件.10000000啊! 自从去年双11[正式上线](https://blog.fundebug.com/2016/11/11/fundeb ...

  2. Promise是Monad吗?

    译者按: 近年来,函数式语言的特性都被其它语言学过去了. 原文: Functional Computational Thinking — What is a monad? 译者: Fundebug 为 ...

  3. xshell工具source导入几个G的数据库

    直奔主题 xshell工具source导入几个G的数据库 1.先把sql文件通过ftp或者winscp上传到服务器对应站点根目录,如图所示 2.进入xshell界面,进入数据库之前一定设定编码,否者会 ...

  4. angular ng-file-upload

    传送门:https://github.com/danialfarid/ng-file-upload#install <script src="angular(.min).js" ...

  5. 【读书笔记】iOS-使用钥匙串保护数据

    一,将应用从设备上删除时,并不会删除其钥匙串项,这使得调试工作困难得多.模拟器有一个Reset Contents and Settings选项,可用于将钥匙串项移除.因此,强烈建议在模拟器上确定Key ...

  6. 数据筛选和API优化

    筛选数据 需求:如果数据库中存在OrderNum相同,且IsDefault不同的记录,那么IsDefault值为0的记录将替换值为1的记录(IsDefault值为1的记录不展示). 由于查出来的数据不 ...

  7. 不需要再手写 onSaveInstanceState 了,因为你的时间非常值钱

    如果你是一个有经验的 Android 程序员,那么你肯定手写过许多 onSaveInstanceState 以及 onRestoreInstanceState 方法用来保持 Activity 的状态, ...

  8. Kotlin入门(21)活动页面的跳转处理

    Activity的活动页面跳转是App最常用的功能之一,在前几章的demo源码中便多次见到了,常常是点击界面上的某个按钮,然后跳转到与之对应的下一个页面.对于App开发者来说,该功能的实现非常普通,使 ...

  9. python安装pbkdf2 遇到错误TypeError: __call__() takes exactly 2 arguments (1 given)

    python安装模块时遇到如下错误, import packaging.requirements File "/usr/lib/python2.7/site-packages/packagi ...

  10. pycharm 中按照文档引包方式,引包错误

    * python使用pycharm ide,如果电脑上有多个解释器的,在项目解释器配置的应该是当前使用的解释器: * 可以把当前使用的解释器目录添加到系统环境变量中,这样就不会报错了 另外,如果目录中 ...