vue+条形码

前言：

       在vue中生成条形码的插件。

 

vue-barcode 官方文档

vue-barcode是JsBarcode的一个简单包装。所以在使用时的配置属性需要在JsBarcode中查看JsBarcode官方文档

展示效果：

使用步骤：

步骤一：安装

cnpm install vue-barcode -S

步骤二：配置，可在main.js中直接配置

import VueBarcode from "vue-barcode";

　Vue.component(‘barcode‘, VueBarcode);

步骤三：页面上使用

<barcode :value="barcodeValue">
    条形码显示失败时的内容
</barcode>

JsBarcode官网api配置:https://github.com/lindell/JsBarcode/wiki/Options

选项	默认值	类型
format	"auto" (CODE128)	String
width	2	Number
height	100	Number
displayValue	true	Boolean
text	undefined	String
fontOptions	""	String
font	"monospace"	String
textAlign	"center"	String
textPosition	"bottom"	String
textMargin	2	Number
fontSize	20	Number
background	"#ffffff"	String (CSS color)
lineColor	"#000000"	String (CSS color)
margin	10	Number
marginTop	undefined	Number
marginBottom	undefined	Number
marginLeft	undefined	Number
marginRight	undefined	Number
flat	false	Boolean
valid	function(valid){}	Function

 

格式

默认值：“自动”（CODE128）

选择要使用的条形码类型。请检查不同条形码类型的维基页面以获取更多信息。

例子：

JsBarcode （“ #barcode” ， “ 123456789012” ， { 
  format：“ EAN13” 
} ））；

JsBarcode （“ #barcode” ， “ 123456789012” ， {
  格式：“ CODE39” 
} ））；

结果：

 

宽度

默认值：2

宽度选项是单个条的宽度。

例子：

JsBarcode （“ #barcode” ， “最小宽度” ， { 
  width：1 
} ）；

JsBarcode （“ #barcode” ， “ Wider条码” ， { 
  width：3 
} ）;

结果：

 

高度

默认值：100

条形码的高度。

例子：

JsBarcode （“ #barcode” ， “ Wider条码” ， {
  高度：150 
} ）;

JsBarcode （“ #barcode” ， “最小宽度” ， { 
  height：25 
} ）；

结果：

 

文本

默认值：未定义

覆盖显示的文字

例子：

JsBarcode （“ #barcode” ， “ Hello” ， {
  文本：“ Hi！” 
} ）;

结果：

字体选项

默认值：“”

使用fontOptions可以在条形码中添加粗体或斜体文本。

例子：

JsBarcode （“ #barcode” ， “ Bold text” ， { 
  fontOptions：“ bold” 
} ）;

JsBarcode （“ #barcode” ， “斜体文本” ， { 
  fontOptions：“斜体” 
} ））；

JsBarcode （“ #barcode” ， “两个选项” ， { 
  fontOptions：“ bold italic” 
} ）；

结果：

  

字形

默认值：“等宽”

在生成的条形码中定义用于文本的字体。这可以是任何默认字体，也可以是@ font-face规则定义的字体。

例子：

JsBarcode （“ #barcode” ， “ Fantasy font” ， { 
  font：“ fantasy” 
} ）；

结果：

文字对齐

默认值：“中心”

设置文本的水平对齐方式。可以左/中/右。

例子：

JsBarcode （“ #barcode” ， “ Left text” ， { 
  textAlign：“ left” 
} ））；

结果：

文字位置

默认值：“底部”

设置文本的垂直位置。可以是底部/顶部。

例子：

JsBarcode （“ #barcode” ， “ Top text” ， { 
  textPosition：“ top” 
} ）；

结果：

文字边距

默认值：2

设置条形码和文本之间的间隔。

例子：

JsBarcode （“ #barcode” ， “文本边距” ， { 
  textMargin：25 
} ）；

结果：

字体大小

默认值：20

设置文本的大小。

例子：

JsBarcode （“ #barcode” ， “更大的文本” ， { 
  fontSize：40 
} ）；

结果：

背景

默认值：“＃ffffff”

设置条形码的背景。

例子：

JsBarcode （“ #barcode” ， “蓝色背景” ， {
  背景：“ #ccffff” 
} ）;

结果：

线色

默认值：“＃000000”

设置条形和文本的颜色。

例子：

JsBarcode （“ #barcode” ， “红线” ， { 
  lineColor：“＃990000” 
} ）；

结果：

保证金

默认值：10

设置条形码周围的间距。如果未设置其他任何内容，则所有方面都将继承margins属性，但是如果要单独设置它们，可以将其替换。

例子：

JsBarcode （“ #barcode” ， “更大的边距” ， {
  边距：30 ，
  背景：“ #dddddd” 
} ）；

JsBarcode （“ #barcode” ， “左/上边距” ， { 
  marginLeft：30 ，
  marginTop：50 ，
  背景：“ #dddddd” 
} ）；

结果：

 

平面

默认值：false

仅适用于EAN8 / EAN13

例子：

JsBarcode （“#barcode” ， “29012343” ， {
  格式：“EAN8” ，
  平：假
} ）;

JsBarcode （“ #barcode” ， “ 29012343” ， { 
  format：“ EAN8” ，
  flat：true 
} ）；

结果：