cnpm install vue-barcode -Simport VueBarcode from "vue-barcode";
Vue.component(‘barcode‘, VueBarcode);<barcode :value="barcodeValue">
条形码显示失败时的内容
</barcode>| 选项 | 默认值 | 类型 |
|---|---|---|
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
} ）；
结果：
