生成二维码

1. 引入QRCode模块

npm install --save qrcode

import QRCode from 'qrcode';

1. 页面代码

批量创建二维码及打印，所以加了个v-for

 <div id="printDiv"/**后面打印用到的区域id*/ :disabled="hussar_20Disabled" ref="hussar_20Ref" v-show="!hussar_20Hidden"class="hussar_20 jxd_ins_elContainer lay-container default"><div v-for="(item,index) in hussar_22Data.split(',')" style="float: left;height: 240px"><div><canvas :ref="'canvas'+index" class="canvas" ></canvas></div>//生成二维码的组件位置<div style="width: 100%;height: 85px; text-align: center"><span style="width:140px;display: inline-block;word-break: break-all;white-space: normal;">{{hussar_21Data.split(',')[index]}}</span></div></div>

点击生成二维码按钮执行

 hussar_17Click() {const self = this;var dataList = self.hussar_22Data.split(",")setTimeout(()=>{for (var i = 0; i < dataList.length; i++) {let canvas = this.$refs[`canvas${i}`][0]//获取页面循环动态生成的二维码组件QRCode.toCanvas(canvas,dataList[i],//生成二维码的数据{width: 170, height: 170, margin: 1.5},//margin调整二维码的白边大小function (error) {if (error) {console.log(error);}});}},100)},

生成效果：

识别二维码

1. 引入QrcodeStream

npm install --save  vue-qrcode-reader

import { QrcodeStream } from 'vue-qrcode-reader';

1. 页面代码

这是二维码扫描区域，v-if="qrcodeshow"可以用来控制摄像头的开关（最开始没加导致摄像头一直处于被占用状态）

 <van-popup v-if="qrcodeshow" v-model="hussar_5Show" :position="hussar_5Position" closeable ref="hussar_5Ref" class="hussar_5 jxd_ins_ionPopup jxd-popup-mobile default"><qrcode-streamv-show="qrcode":camera="camera":torch="torchActive"@decode="onDecode"//识别成功后的回调@init="onInit"//初始化验证摄像头配置（不知道有没有用，反正写上没啥问题）><div><div class="qr-scanner"><div class="box"><div class="line"></div><div class="angle"></div></div><div class="txt1"><div class="myQrcode">将二维码/条码放入框内，即自动扫描</div></div></div></div></qrcode-stream></van-popup>

      onDecode(result) {console.log(result)//result就是识别后的内容self.qrcodeshow=false//识别成功后设为false关闭摄像头        },async onInit(promise) {const { capabilities } = await promise;const TORCH_IS_SUPPORTED = !!capabilities.torch;try {await promise;} catch (error) {if (error.name === 'NotAllowedError') {this.error = 'ERROR: 您需要授予相机访问权限';} else if (error.name === 'NotFoundError') {this.error = 'ERROR: 这个设备上没有摄像头';} else if (error.name === 'NotSupportedError') {this.error = 'ERROR: 所需的安全上下文(HTTPS、本地主机)';} else if (error.name === 'NotReadableError') {this.error = 'ERROR: 相机被占用';} else if (error.name === 'OverconstrainedError') {this.error = 'ERROR: 安装摄像头不合适';} else if (error.name === 'StreamApiNotSupportedError') {this.error = 'ERROR: 此浏览器不支持流API';}}},

样式信息：

.qr-scanner {background-image: linear-gradient(0deg,transparent 24%,rgba(229, 192, 149,0.1) 25%,rgba(229, 192, 149,0.1) 26%,transparent 27%,transparent 74%,rgba(229, 192, 149,0.1) 75%,rgba(229, 192, 149,0.1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(229, 192, 149,0.1) 25%,rgba(229, 192, 149,0.1) 26%,transparent 27%,transparent 74%,rgba(229, 192, 149,0.1) 75%,rgba(229, 192, 149,0.1) 76%,transparent 77%,transparent);background-size: 3rem 3rem;background-position: -1rem -1rem;width: 100%;/* height: 100%; */height: 400px;/* height: 288px; */position: relative;background-color: #1110;/* background-color: #111; */}/* .qrcode-stream-wrapper {display: flex;justify-content: center;align-items: center;margin-top: 82px;clear: both;} *//* .qrcode-stream-wrapper >>> .qrcode-stream-camera {width: 213px;height: 210px;clear: both;margin-top: 39px;} */.qr-scanner .box {width: 213px;height: 213px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);overflow: hidden;border: 0.1rem solid rgba(229, 196, 118, 0.2);/* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */}.qr-scanner .txt1 {width: 100%;height: 35px;line-height: 35px;font-size: 14px;text-align: center;/* color: #f9f9f9; */margin: 0 auto;position: absolute;top: 80%;left: 0;}.qr-scanner .myQrcode {text-align: center;color: rgba(229, 192, 149,0.99);}.qr-scanner .line {height: calc(100% - 2px);width: 100%;background: linear-gradient(180deg, rgba(229, 192, 149, 0) 43%, rgba(229, 192, 149) 211%);border-bottom: 2px solid rgba(63, 229, 221, 0.99);transform: translateY(-100%);animation: radar-beam 2s infinite alternate;animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);animation-delay: 1.4s;}.qr-scanner .box:after,.qr-scanner .box:before,.qr-scanner .angle:after,.qr-scanner .angle:before {content: '';display: block;position: absolute;width: 3vw;height: 3vw;border: 0.2rem solid transparent;}.qr-scanner .box:after,.qr-scanner .box:before {top: 0;border-top-color: rgba(229, 220, 159, 0.67);}.qr-scanner .angle:after,.qr-scanner .angle:before {bottom: 0;border-bottom-color: rgba(229, 220, 159, 0.67);}.qr-scanner .box:before,.qr-scanner .angle:before {left: 0;border-left-color:rgba(229, 220, 159, 0.67);}.qr-scanner .box:after,.qr-scanner .angle:after {right: 0;border-right-color: rgba(229, 220, 159, 0.67);}

Vue打印指定区域

js原生的windows.print()会将整个页面打印出来，所以使用vue-print-nb

1. 安装并在main.js或index.js中注册

npm i vue-print-nb

import Print from 'vue-print-nb'
Vue.use(Print);

1. 页面代码：

<el-button tabindex="" :disabled="hussar_19Disabled" v-print="printObj" ref="hussar_19Ref"v-show="!hussar_19Hidden" class="hussar_19 jxd_ins_elButton lay-btn button_additional default"><i class=""></i><span>打印</span>
</el-button>

  data() {return {printObj: {id: "printDiv", // 这里是要打印元素的IDpopTitle: "", // 打印的标题},}

1. 效果图：