外观
Barcode 条形码
约 986 字大约 3 分钟
2025-10-31
基于 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>页面源码地址
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 | 库德巴码,支持数字、字母和特殊字符 | 图书馆、医疗 | 数字、字母、特殊字符 |
