生成条码 -- jsbarcode

作用，将文本转为条形码，不同的条码规则创建出来的条形码的大小以及疏密程度不一致

首先，安装依赖

	npm install jsbarcode --save-dev

在需要的页面进行引入

	import JsBarcode from 'jsbarcode';

使用：

	/*
		@param {content}  生成条码的位置
		@param {text }  用于生成条码的文本
		@param {option}  默认配置项目
	*/
	JsBarcode(content, text , option);

关于默认配置项有以下这些，按需配置

	{ 
	     format: "CODE39",//选择要使用的条形码类型
		 width:3,//设置条之间的宽度
		 height:100,//高度
		 displayValue:true,//是否在条形码下方显示文字
		 text:"456",//覆盖显示的文本
		 fontOptions:"bold italic",//使文字加粗体或变斜体
		 font:"fantasy",//设置文本的字体
		 textAlign:"left",//设置文本的水平对齐方式
		 textPosition:"top",//设置文本的垂直位置
		 textMargin:5,//设置条形码和文本之间的间距
		 fontSize:15,//设置文本的大小
		 background:"#eee",//设置条形码的背景
		 lineColor:"#2196f3",//设置条和文本的颜色。
		 margin:15//设置条形码周围的空白边距
	}

上述条码类型format的合法值支持：

	CODE128
	  CODE128 (自动模式切换)
	  CODE128 A/B/C (强制模式)
	EAN
	  EAN-13
	  EAN-8
	  EAN-5
	  EAN-2
	  UPC (A)
	CODE39
	ITF-14
	MSI
	  MSI10
	  MSI11
	  MSI1010
	  MSI1110
	Pharmacode
	Codabar

这是实际的例子（当初为了模拟条形码扫描做的扫码板）：

	<template>
	    <div class="trayContent" >
	        <div class="trayItem"  v-for="(item,index) in trayList" :key="index">
	            <canvas :id="'trayItem'+index"  style="width:200px;height:80px;" :key="index" @click.stop="stopPop"></canvas>
	            <div>{{item}}</div>
	        </div>
	    </div>
	</template>
	<script>
	import JsBarcode from 'jsbarcode'
	import trayList from './trayNum'
	    export default {
	        data () {
	            return {
	                trayList,
	            }
	        },
	        mounted(){
	            console.log(trayList);
	            this.genCode();
	        },
	        methods:{
	            stopPop(){},
	            genCode(){
	                this.$nextTick(()=>{
	                    this.trayList.forEach((item,index)=>{
	                        console.log(`#trayItem${index}`)
	                        JsBarcode(`#trayItem${index}`, item, {displayValue:false});
	                    })
	                })
	            },
	        }
	    }
	</script>
	<style scoped>
	    .trayContent{
	        display:flex;
	        flex-wrap: wrap;
	        align-items: center;        
	    }
	    .trayItem{
	        margin-top:35px;
	        margin-right:10px;
	        width:200px;
	        height:80px;
	        background:white;
	        display:flex;
	        flex-wrap:wrap;
	        align-items: center;
	        justify-content: center;
	        border:1px solid #e8e8e8;
	    }
	</style>

效果图：

代码中用到的trayNum.js:

		let trayList = ['0002995', '0001455', '0001353', '0003125', '0001319', '0003139', '0003129', '0003076', '0001351', '0001373', '0001341', '0001344', '0001370', '0003138', '0001379', '0003006', '0001316', '0001313', '0003126', '0001382', '0001364', '0001324', '0001336', '0001512', '0001377', '0001333', '0001359', '0003008', '0003000', '0001375', '0003197', '0003080', '0001331', '0001369', '0001346', '0003122', '0001329', '0003078', '0001515', '0001521', '0001343', '0002085', '0001366', '0003120', '0003130', '0003140', '0003079', '0003194', '0003114', '0001518', '0001349', '0003123', '0003109', '0003141', '0001323', '0001354', '0003188', '0001385', '0001509', '0001321', '0001314', '0001361', '0003108', '0001372']
	export default trayList;

用于存放的容器，必须是canvas节点 或者 svg 节点：

	<canvas :id="'trayItem'+index"  style="width:200px;height:80px;" :key="index" @click.stop="stopPop"></canvas>

format 不同绘制的码不同:

1.CODE39

使用svg做容器的时候,需要设置高度

2.CODE128

CODE128 与CODE39 的区别：

根据自己的实际需求进行设置