vue2和vue3 中条形码的使用

介绍

安装

// 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