Vue前台可以生成二维码了，您还在用后台生成吗？
? 简介:维码现在已经随处可见了，现在的生活中各种二维码呈现在大家面前，方便大家手机或者手持枪等手持设备进行识别，同时用来标识当前商品或者物品的唯一性。 我们在工业等生产制造业用到的二维码更多，像部品、BOM组件等等。 所以我们无论是做BS开发或者客户端开发，有时用到生成二维码的时候还是比较多的。 以前用java或者.net等后端语言进行生成，前台其实也是可以生成二维码，今天我们看一下vue前台生成二维码。
1.预览二维码和条形码生成效果
2.安装二维码插件和条形码插件?
npm install qrcodejs2 --save
npm install jsbarcode--save3.引用二维码插件和条形码插件
import QRCode from 'qrcodejs2'
import JsBarcode from 'jsbarcode'4.页面布局使用二维码生成插件
<template>
<div id="QRcodeGeneration">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><h1><i class="el-icon-lx-cascades"></i> 二维码（将文本生成二维码）</h1></el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-row>
<el-col :span="18" class="qrcol">
<el-card :body-style="{ padding: '0px' }">
<el-input type="textarea" :autosize="{ minRows: 9, maxRows: 9}" v-model="QrCodeTextarea" placeholder="请输入内容">
</el-input>
<div style="text-align: right;">
<b>字符数量:{{this.QrCodeWordsNumberText}}</b>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card :body-style="{ padding: '0px' }">
<div id="qrcode" ref="qrcodeContainer"></div>
</el-card>
</el-col>
</el-row>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><h1><i class="el-icon-lx-cascades"></i> 条形码（将文本生成条形码）</h1></el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-row>
<el-col :span="18" class="qrcol">
<el-card :body-style="{ padding: '0px' }">
<el-input type="textarea" :autosize="{ minRows: 9, maxRows: 9}" maxlength="25" v-model="BarcodeTextarea" placeholder="请输入内容">
</el-input>
<div style="text-align: right;">
<b>字符数量:{{this.BarcodeWordsNumberText}}</b>
</div>
</el-card>
</el-col>
<el-col :span="6" >
<el-card :body-style="{ padding: '0px' }" >
<svg id="barcode" class="BarcodeStyle"></svg>
</el-card>
</el-col>
</el-row>
</div>
</template>5.初期化定义插件并使用二维码插件和条形码插件
<script>
import QRCode from 'qrcodejs2'
import JsBarcode from 'jsbarcode'
export default {
data: function() {
return {
keyword: '',
QrCodeTextarea: '',
BarcodeTextarea: '',
BarcodeWordsNumberText: '',
QrCodeWordsNumberText: ''
}
},
mounted() { //调用
this.qrcode();
this.barcode();
},
methods: {
qrcode() {
let tqrcode = new QRCode('qrcode', {
width: 200,
height: 200, // 高度 [图片上传失败...(image-9ad77b-1525851843730)]
text: this.QrCodeTextarea, // 二维码地址
render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
background: '#f0f',
foreground: '#ff0',
colorDark: "#0aa",
colorLight: "#fff",
})
},
barcode() {
JsBarcode("#barcode", this.BarcodeTextarea, {
format: "CODE128", //选择要使用的条形码类型
// lineColor: "#0aa",
// width: 4,
// height: 40,
width: '1px',
height: '55px',
fontSize: '22px', //字体大小
displayValue: true, //是否在条形码下方显示文字
textPosition: "top" //设置文本的垂直位置
});
}
},
watch: {
// 如果 `question` 发生改变，这个函数就会运行
QrCodeTextarea: function() {
let qrcodeEL = document.getElementById("qrcode");
let qrcode = new QRCode(qrcodeEL);
document.getElementById("qrcode").innerHTML = "";
this.showQRCode = true;
this.qrcode();
this.QrCodeWordsNumberText = this.QrCodeTextarea.length;
// this.barcode();
},
BarcodeTextarea: function() {
// let barcodeEL = document.getElementById("barcode");
document.getElementById("barcode").innerHTML = "";
this.barcode();
this.BarcodeWordsNumberText = this.BarcodeTextarea.length;
},
},
computed: {
list() {
return this.iconList.filter((item) => {
return item.indexOf(this.keyword) !== -1;
})
}
}
}
</script>
<style>
#qrcode {
display: inline-block;
}
#QRcodeGeneration {
width: 100%;
text-align: center;
}
.qrcol {
border-radius: 4px;
min-height: 150px;
/* background-color: #B3E19D; */
}
.BarcodeStyle {
border-radius: 4px;
min-height: 200px;
/* background-color: #B3E19D; */
}
</style>vue生成二维码的代码基本上就这些了，主要为了简化后台代码，不用那么费劲的在写后台了。 后续我会分享更多的技术相关的内容，请大家多多关注。
本文参与?腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/12/07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
