Vue项目整合vue-qrcode生成二维码
相较于上一次使用后端生成二维码传给前端,直接在前端生成二维码也更具有灵活性。这也可能是因为我对前端比较熟悉的原因,才会觉得更好用。
vue-qrcode官方介绍:https://www.npmjs.com/package/vue-qr
本篇文章参考链接https://blog.csdn.net/fifteen718/article/details/85850511
1.前端安装vue-qrcode
npm install vue-qr --save
2.项目文件中进行引用
<template>
<div class="app-container">
<el-table
v-loading="listLoading"
:data="tableData"
border
fit
highlight-current-row
style="width: 100%"
>
<el-table-column prop="orderId" label="订单编号" />
<el-table-column width="270px" label="操作" align="center">
<template slot-scope="{ row }">
<el-button size="mini" type="primary" @click="showEncode(row)"
>显示二维码</el-button
>
</template>
</el-table-column>
</el-table>
<el-dialog :visible="open" :title="title" width="360px">
<div>
<template>
<vue-qr
class="vue-qr"
:text="encode"
:logoScale="50"
:size="300"
></vue-qr>
</template>
</div>
<div>
<el-button type="primary" style="margin-left: 200px" @click="cancel"
>确 定</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import {
mapGetters, mapState } from "vuex";
import vueQr from "vue-qr";
export default {
components: {
vueQr },
data() {
return {
listLoading: true,
tableData: [],
open: false,
title: "",
encode: ""
},
}
methods: {
showEncode(row) {
this.open = true;
this.title = "订单二维码";
this.encode = row.orderEncode;
},
cancel() {
this.open = false;
},
},
};
</script>
通过slot-scope绑定该行的row
值,然后将需要封装在二维码中的数据通过一个String类型的字段orderEncode
赋值给二维码绑定的内容,即encode
。这样,就可以实现在点开不同的数据行按钮时所打开的二维码里面对应的有相应的赋值,实现数据的动态切换。(省略了获取数据的方法)
3.常用属性介绍
属性名称 | 属性介绍 |
---|---|
text | 二维码封装的数据内容 |
size | 二维码宽高大小,设一个参数即可 |
margin | 默认边距20px,可以设置为0 |
colorDark | 实点的颜色,注意要和colorLight一起设置才有效 |
colorLight | 空白的颜色,注意要和colorDark一起设置才有效 |
logoSrc | 二维码中间的图片 |
logoScale | 中间图的尺寸 |