安装
通过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>