条形码（barcode）

条形码也叫条码，是由一组规则排列、宽度不同、黑白相间、平行相邻的线条组成，并配有相对应字符组成的码记，用来表示一定的信息。

基本使用

<template>
  <div class="tw-flex tw-justify-center">
    <itv-barcode value="12345678" :props="barcodeProps"></itv-barcode>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        barcodeProps: {
          format: "CODE39", //选择要使用的条形码类型
          width: 1, //设置条之间的宽度
          height: 40, //高度
          displayValue: true, //是否在条形码下方显示文字
          textAlign: "center", //设置文本的水平对齐方式
          fontSize: 15, //设置文本的大小
          margin: 15, //设置条形码周围的空白边距
        },
      };
    },
  };
</script>

Expand Copy Copy

Attributes

属性名	类型	默认值	说明
value	String, Number	""	条码值
index	Number		索引值（唯一值，多个条形码时需要设置）
props	Object	配置选项，具体看下表	配置项

Props

属性	类型	默认值	说明
format	String	"auto" (CODE128)	选择要使用的条形码类型 CODE128、EAN / UPC、CODE39、ITF-14、MSI、Pharmacode、Codabar
width	Number	2	设置条之间的宽度
height	Number	100	高度
displayValue	Boolean	true	是否在条形码下方显示文字
fontOptions	String	""	使文字加粗体或变斜体
font	String	"monospace"	设置文本的字体
textAlign	String	"center"	设置文本的水平对齐方式
textPosition	String	"bottom"	设置文本的垂直位置
textMargin	Number	2	设置条形码和文本之间的间距
fontSize	Number	20	设置文本的大小
background	String (CSS color)	"#ffffff"	设置条形码的背景
lineColor	String (CSS color)	"#000000"	设置条和文本的颜色
margin	Number	10	设置条形码周围的空白边距

提示

引入插件 JsBarcode (opens new window)，查看WIKI (opens new window)