vue+条形码

前言：在vue中生成条形码的插件。vue-barcode官方文档vue-barcode是JsBarcode的一个简单包装。所以在使用时的配置属性需要在JsBarcode中查看JsBarcode官方文档展示效果：使用步骤：步骤一：安装cnpm install vue-barcode -S步骤二：配置，可在main.js中直接配置import VueBarcode from "vue-barcode"

浩星

11397人浏览 · 2020-11-05 19:10:44

浩星 · 2020-11-05 19:10:44 发布

前言：

在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” 
} ））；

结果：

EAN13 代码39

宽度

默认值：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 
} ）；

结果：

文字边距

背景

默认值：“＃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 
} ）；

结果：

平面/非平面

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^