二维码和打印功能

首先，需要安装生成二维码的插件

$ yarn add qrcode

qrcode的用法是

QrCode.toCanvas(dom, info)

dom为一个canvas的dom对象， info为转化二维码的信息

<canvas></canvas>

二维码生成演示

<el-dialog width="300px" title="二维码" :visible="showCodeDialog" @close="closeDialog">
  <el-row type="flex" justify="center">
    <canvas ref="myCanvas" />
  </el-row>
</el-dialog>

将图片地址转为二维码

import QrCode from 'qrcode'

clickShowCodeDialog(url) {
  if (!url) return
  this.showCodeDialog = true
  this.$nextTick(() => {
    // 如果这里 url 写的是网址, 就会跳转到对应网址 (二维码分享效果)
    QrCode.toCanvas(this.$refs.myCanvas, url)
  })
}

打印功能

利用vue-print-nb打印
我们借助一个比较流行的插件 vue-print-nb

$ yarn add vue-print-nb

首先注册该插件

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

给要打印的盒子指定 id

<div id="printbox">

使用v-print指令的方式进行打印

<div style="text-align: right; margin-top: 10px;">
  <el-button v-print="{ id: 'printbox' }" type="primary" size="small">打印</el-button>
</div>