Vue-Barcode 选项集 - HTML

介绍

Vue-Barcode 是一个用于生成多种不同类型的条形码（如 EAN-13、UPC-A、CODE128 等）的 Vue 组件。它是基于 jsbarcode 库创建的，可以轻松地在 Vue 应用程序中使用。

安装

使用 npm 安装：

npm install vue-barcode --save

用法

在你的 Vue 组件中引入 Vue-Barcode 并将其注册。

<template>
  <div>
    <vue-barcode :value="barcodeText" :type="barcodeType" />
  </div>
</template>

<script>
import VueBarcode from "vue-barcode";

export default {
  components: {
    VueBarcode
  },
  data() {
    return {
      barcodeText: "1234567890128",
      barcodeType: "EAN13"
    };
  }
};
</script>

Props

Vue-Barcode 组件提供几个属性，可以根据需要进行配置。

value

• 类型: String
• 默认值: ""

要生成的条形码的值。

type

• 类型: String
• 默认值: "EAN13"
• 可选值: "EAN8", "EAN13", "UPCA", "CODE128", "ITF14"

要生成的条形码的类型。

options

• 类型: Object
• 默认值: {}

传递给 jsbarcode 库的选项。可以在这里设置条形码的宽度、高度、文本大小、背景颜色和前景（线）颜色。

可用选项：

• format: 条形码格式 (default: "auto")
• displayValue: 是否在条形码下方显示值 (default: true)
• fontSize: 条形码值的字体大小 (default: 12)
• textMargin: 文本与条形码的距离 (default: 0)
• width: 条形码宽度 (default: 1)
• height: 条形码高度 (default: 50)
• margin: 条形码周围的空白边距 (default: 10)
• background: 条形码的背景颜色 (default: #ffffff)
• lineColor: 条形码的前景（线）颜色 (default: #000000)

示例

<template>
  <div>
    <vue-barcode :value="barcodeText" :type="barcodeType" :options="barcodeOptions" />
  </div>
</template>

<script>
import VueBarcode from "vue-barcode";

export default {
  components: {
    VueBarcode
  },
  data() {
    return {
      barcodeText: "1234567890128",
      barcodeType: "EAN13",
      barcodeOptions: {
        displayValue: true,
        fontSize: 30,
        height: 100,
        margin: 10,
        background: "#ffffff",
        lineColor: "#000000"
      }
    };
  }
};
</script>

参考资料

• jsbarcode 官方文档