vue2和vue3 中条形码的使用

介绍

vue-barcode 是基于JsBarcode插件封装，原生插件JsBarcode地址

安装

// vue2 
npm install vue-barcode
// vue3
npm install vue3-barcode

引入

// vue2
import VueBarcode from 'vue-barcode';
components: {VueBarcode}
// vue3
import VueBarcode from 'vue3-barcode';
components: {VueBarcode}

使用

// 使用方式vue2与vue3一样  两者都不能使用 v-model 语法糖
<vue-barcode :value="value">不支持vue-bercode</vue-barcode>

属性

vlaue：所需要生成的值
format：条形码类型
	CODE128：一种高密度的一维条码，可表示从ASCII0到ASCII127共128个字符（其中包含数字，字母，符号），故称128码。
		优点：
		1、可表示高密度数据和字符串；
		2、每个字符由3个条、3个空、11个单元构成，字符串可变长；
		3、符号内含校验码；
		4、有三种不同的版本：
			Code128 A码可表示：大写英文字母、数字、控制字符组成的字符串，比如：ABC、ABC123。
			Code128 B码可表示：大小写英文字母、数字、字符组成的字符串，比如：Abc123、A-123(B)
			Code128 C码可表示：仅可表示100个“两位”数字编码（00-99），比如：123456、00225869。
			5、可用128个字符分别在A、B或C三个字符串集合中。
			
	CODE39：用于物流跟踪、生产线流程等方面。支持26个英文大写字母（A-Z），十个数字（0-9），连接号（-），空格，英文的句号（.），加号（+），斜杠（/），百分号（%）以及美元符号（$）共43个字符，可以对任意长度的数据进行编码。
		优点：
		1、能够对任意长度的数据进行编码。其局限在于印刷品的长度和条码阅读器的识别范围。
		2、支持设备广泛。目前几乎所有的条形码阅读设备都能阅读Code39码，打印机也是同样情况。
		3、编制简单。简单的开发技术就能快速生成相应的编码图像。
		4、一般Code39码由5条线和分开它们的4条缝隙共9个元素构成。线和缝隙有宽窄之分，而且无论线还是缝隙仅有3个比其他的元素要宽一定比例。
		
	EAN/UPC：欧洲商品编码 (EAN) 系统是欧洲版本的通用商品代码 (UPC)
		常用：EAN-8、EAN-13、EAN-128
	ITF-14
	MSI
	Pharmacode
	Codabar
	
wdith：条之间的宽度 Number 默认 2
height：条形码整体高度 Number 默认 100
displayValue：条形码下是否显示问题 Boolean 默认 true
text：自定义条形码下显示的文本内容 String
fontOptions：使文字加粗体或变斜体 例如 "bold italic"
font： 字体样式 例如 "fantasy"
textAlign： 字体水平对齐方式 默认 "center" 可选值：left，center，right
textPosition：置文本的垂直位置 默认 "bottom" 可选值：top，middle，bottom
textMargin：设置条形码和文本之间的间距 Number 默认 2
fontSize：设置文本的大小 Number 默认 20
background：设置条形码的背景 默认 "#ffffff"
lineColor：设置条和文本的颜色 默认 "#000000"
margin：设置条形码周围的空白边距 默认 10
valid：校验 Function