目标：

生成标签并实现打印功能

---

学习步骤：

1、了解 VueBarcode
2、了解 VueEasyPrint
3、VueBarcode 实践
4、VueEasyPrint 实践
5、VueBarcode + VueEasyPrint 合体

---

一、了解 VueBarcode

点击传送至官网

原文介绍：

JsBarcode是一个用JavaScript编写的条形码生成器。它支持多种条形码格式，可以在浏览器和Node.js中使用。当它用于web时，它没有依赖性，但如果您喜欢，它可以与jQuery一起使用。

甚至还有在线调试Demo😊

点击跳转 条码相关参数修改介绍

二、了解 VueEasyPrint

这是一个基于vue 2.0的打印组件

它的核心是使用vue组件的slot插槽进行模板加载。 使用iframe复制打印区域

点击跳转至官方文档

三、VueBarcode实践

1、先安装vue-barcode插件

npm install vue-barcode

2、引入 VueBarcode 并注册为组件

import VueBarcode from 'vue-barcode';

3、页面使用该组件

四、VueEasyPrint实践

1、按照官方教学快速入门安装

npm install vue-easy-print --save

2、引入VueEasyPrint并注册为组件

import vueEasyPrint from "vue-easy-print";

3、在页面中使用

4、配置props参数

		// 是否显示表格
        tableShow:{
            type:Boolean,
            default:false
        },
        // 每页多少行
        onePageRow: {
            type:Number,
            default:5,
        },

5、绑定打印按钮实现打印功能

五、VueBarcode + VueEasyPrint 合体

上面两步实践结合

将生成条码及逻辑代码放入打印组件中

效果