基于 JsBarcode.js 库实现的条形码生成组件，支持多种条形码格式。

使用场景

• 商品标签、库存管理等需要条形码的场景
• 会员卡、优惠券等需要条形码标识的场景
• 物流、快递等需要条形码追踪的场景
• 任何需要生成和显示条形码的应用场景

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	X	√	√

基本使用

通过 value 属性设置条形码内容，format 属性设置条形码类型。

<template>
  <view>
    <u-barcode 
      value="123456789" 
      format="CODE128"
    ></u-barcode>
  </view>
</template>

不同条形码类型

支持多种条形码类型，常用的包括：

<template>
  <view>
    <!-- CODE128 类型 -->
    <u-barcode 
      value="123456789" 
      format="CODE128"
    ></u-barcode>
    
    <!-- CODE39 类型 -->
    <u-barcode 
      value="123456789" 
      format="CODE39"
    ></u-barcode>
    
    <!-- EAN13 类型（需要13位数字） -->
    <u-barcode 
      value="1234567890123" 
      format="EAN13"
    ></u-barcode>
  </view>
</template>

自定义样式

可以通过多种属性自定义条形码的外观：

<template>
  <view>
    <!-- 自定义颜色 -->
    <u-barcode 
      value="123456789" 
      format="CODE128"
      color="#ff0000"
      backgroundColor="#f0f0f0"
    ></u-barcode>
    
    <!-- 自定义尺寸 -->
    <u-barcode 
      value="123456789" 
      format="CODE128"
      :width="3"
      :height="100"
    ></u-barcode>
    
    <!-- 不显示文本 -->
    <u-barcode 
      value="123456789" 
      format="CODE128"
      :displayValue="false"
    ></u-barcode>
    
    <!-- 文本位置在上方 -->
    <u-barcode 
      value="123456789" 
      format="CODE128"
      textPosition="top"
    ></u-barcode>
  </view>
</template>

文本样式配置

可以自定义条形码下方文本的样式：

<template>
  <view>
    <u-barcode 
      value="123456789" 
      format="CODE128"
      :fontSize="16"
      font="Arial"
      textAlign="center"
      :textMargin="10"
    ></u-barcode>
  </view>
</template>

<script>
export default {
  data() {
    return {
      barcodeValue: '123456789'
    }
  }
}
</script>

页面源码地址

页面源码地址

 github  gitee

API

Props

参数	说明	类型	默认值	可选值
value	条形码内容	String	-	-
format	条形码类型	String	CODE128	CODE128 | CODE39 | EAN13等
width	条形码宽度	String | Number	2	-
height	条形码高度	String | Number	80	-
color	条形码颜色	String	#000000	-
backgroundColor	背景颜色	String	#ffffff	-
displayValue	是否显示文本	Boolean	true	true | false
textPosition	文本位置	String	bottom	top | bottom
canvasType	画布类型	String	2d	2d | -
fontOptions	字体选项	String	-	-
font	字体	String	Arial	-
textAlign	文本对齐方式	String	center	left | center | right
textMargin	文本边距	Number	5	-
fontSize	字体大小	Number	14	-
customStyle	自定义样式	Object | String	-	-
mode 3.6.1	生成模式，图片模式不存在层级问题	String	image	canvas

支持的条形码类型

根据 JsBarcode.js 库，支持以下条形码类型：

类型	说明	适用场景	字符要求
CODE128	通用条形码，支持所有ASCII字符	商品标签、库存管理	任意ASCII字符
CODE39	工业条形码，支持数字、字母和特殊字符	工业标识、物流	数字、字母、特殊字符
CODE93	高密度条形码，CODE39的改进版	工业标识、物流	数字、字母、特殊字符
EAN13	欧洲商品编码，13位数字	零售商品、超市	13位数字
EAN8	欧洲商品编码，8位数字	小型商品	8位数字
EAN5	欧洲商品编码，5位数字	图书、杂志	5位数字
EAN2	欧洲商品编码，2位数字	图书、杂志	2位数字
UPC	美国商品编码，12位数字	北美零售商品	12位数字
ITF	交插二五码，仅数字	物流、仓储	数字
ITF14	交插二五码，14位数字	物流、仓储	14位数字
MSI	MSI条形码，仅数字	库存管理	数字
MSI10	MSI条形码，10位数字	库存管理	10位数字
MSI11	MSI条形码，11位数字	库存管理	11位数字
MSI1010	MSI条形码，10位数字+校验位	库存管理	10位数字
MSI1110	MSI条形码，11位数字+校验位	库存管理	11位数字
Pharmacode	药品编码，仅数字	药品标识	数字
Codabar	库德巴码，支持数字、字母和特殊字符	图书馆、医疗	数字、字母、特殊字符