NBarcode 条形码
基于 Canvas 绘制的条形码组件：EAN-13 商品条码与 Code 128 通用条码双码型，颜色 / 数字标注 / 尺寸全可配，像素级高分屏绘制与 png dataURL 导出。
平台兼容性
| App(ANDROID) | App(IOS) | App(HARMONY) | WEB | 微信小程序 |
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
- 绘制通道分端：Web 端画布元素直取上下文，小程序端组件作用域选择器取节点，App 端异步上下文载体；导出统一 png dataURL。
- Code 128 仅支持 ASCII 字符（含中文会触发 error）；EAN-13 仅接受数字。
基本使用
html
<template>
<n-barcode value="6937147252044" />
</template>EAN-13 说明：12 位输入自动补校验位；13 位输入校验校验位，校验失败时条码仍绘制并触发 invalid（无效条码扫码枪读不出商品信息，仅供展示场景判断）。内容非 12/13 位数字时触发 error 且不绘制。
Code 128（任意 ASCII 文本，长度自适应码集压缩）：
html
<template>
<n-barcode type="code128" value="ORDER-2024" :width="380" :height="100" />
</template>内容动态更新（value 一变即重绘）：
html
<template>
<n-barcode :value="code" @change="onChange" @error="onError" />
</template>
<script setup lang="uts">
const code = ref("6937147252044");
function onChange(value: string) {
// value 为当前绘制完成的内容
}
function onError(message: string) {
// 内容非法（位数 / 字符范围）等
}
</script>导出图片：
html
<script setup lang="uts">
const barcodeRef = ref<NBarcodeComponentPublicInstance | null>(null);
async function save() {
const dataUrl = await barcodeRef.value!.toPng();
// png dataURL，可直接用作 image src 或自行转存
}
</script>API
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | "" | 条码内容：ean13 为 12/13 位数字（12 位自动补校验位），code128 为 ASCII 文本 |
| width | number | string | 380 | 条码宽度 px（数字）或 px/rpx 字符串 |
| height | number | string | 120 | 条码高度 px（数字）或 px/rpx 字符串 |
| type | "ean13" / "code128" | "ean13" | 码型 |
| color | string | "#181818" | 条与数字标注颜色 |
| showText | boolean | true | 是否在条码下方绘制数字标注（ean13） |
| showPrefix | boolean | true | 首位数字是否前置显示在条码左侧（ean13） |
| customClass | string | "" | 根节点类名（类须定义在组件样式表内，如 n-barcode--xxx） |
| customStyle | string | "" | 根节点行内样式，拼接在内部默认值之后可覆盖（含尺寸） |
事件
| 事件 | 参数 | 说明 |
|---|---|---|
| ready | — | 首次绘制完成时触发（仅一次） |
| change | value: string |
条码重绘完成时触发，参数为当前内容 |
| valid | — | EAN-13 校验位通过时触发 |
| invalid | — | EAN-13 校验位失败时触发（条码仍已绘制，仅供展示判断） |
| longpress | — | 长按条码时触发 |
| error | message: string |
生成失败时触发：内容非法（EAN-13 非 12/13 位数字、Code 128 含非 ASCII 字符）或画布通道失败 |
插槽
无。
实例方法
（通过 ref 直调）
| 方法 | 参数 | 返回 | 说明 |
|---|---|---|---|
| toPng | — | Promise<string> | 导出当前条码为 png dataURL（三端一致）；空内容或未绘制成功时返回空串 |
实现说明（参考做法 vs 本库做法）
参考源仅其一（另两源无条码组件），下表逐机制记录映射与分歧：
| 机制 | 参考做法 | 本库做法 | 分歧理由 |
|---|---|---|---|
| 码型命名 | type 数字 1（EAN-13）/ 2（Code 128） | 字符串枚举 "ean13" | "code128" |
语义化枚举（数字魔数可读性差） |
| 尺寸语义 | width/height 为 rpx 数值 | 数字 = px、字符串支持 px/rpx | 与本库二维码等画布组件换算语义一致 |
| 数字标注开关 | options.number | prop showText |
number 命名易误读为"内容须为数字" |
| 首位前置开关 | options.prefix | prop showPrefix |
与 showText 对仗自解释 |
| 前景色 | options.color（默认 #181818） | prop color，默认值沿用 |
提为正式 prop |
| Code 128 前景 | 固定 #000000（不接 color） | 统一接 color |
同一 color prop 对两种码型生效，避免同 prop 行为分叉 |
| 调试辅助线 | options.debug（红色分隔线） | 不收录 | 编码库调试残留，无使用者价值；校验有效性走 valid/invalid |
| 校验回调 | onValid / onInvalid / onSuccess / onError 回调参数 | 事件 valid / invalid；成功/失败由 ready / change / error 覆盖 |
回调式 options 事件化（库惯例），不重复设事件 |
| 手动绘制 | draw(options) 手动入口 | 无 draw()：value 等 props 响应式自动重绘 | 参考无响应式的补丁入口；响应式后手动入口冗余 |
| 触摸透传 | touchStart / touchEnd 透传 | 不收录 | 无业务语义（画布触摸不含交互逻辑），业务可直接在组件外层监听 |
| longclick | longclick 事件 | longpress 事件（画布通用长按事件转发） |
统一 uni 惯用事件名 |
| ready 参数 | 无参 | 使用者无需画布 id（组件自持绘制通道） | |
| 导出 | 无 | toPng() png dataURL 三端一致 |
与本库二维码 / 签名 / 裁剪组件同源导出基建 |
| Code 128 几何 | 绘制起点 top = border_size - 4（条顶 4px 画到画布外被裁、底部贴边） | top = 0、条高 = 画布高 | 根治参考实现补偿 hack |
| EAN-13 校验位公式 | 10 - (counter % 10) % 10：权重和为 10 的倍数时校验位产出 10（两位数导致编码失败） |
(10 - (counter % 10)) % 10 |
根治参考实现公式缺陷（校验位 0 的合法场景参考无法编码） |
| Code 128 的 ~ 字符 | 设计意图为替换 FNC1（GS1-128），但替换表对象字面量键未求值、替换恒不生效（~ 被编成普通字符） | ~ 生效替换为 FNC1 |
按参考注释自述的设计意图修复死代码；GS1 条码的 FNC1 为真实业务需求 |
| 空值 | 空串走空编码绘制空码 | 空值清空画布不发事件 | 与本库二维码同契约 |
| 主题 | 不随主题 | 不随主题（背景透明、颜色由 color 控制） | 条码是数据图形，颜色显式控制 |
编码核心为 EAN-13（GB 12904 / ISO 15420）与 Code 128（ISO 15417）公开标准算法实现：编码表与校验公式逐字节对齐成熟开源实现，离线比对脚本验证输出逐位一致（EAN-13 十种首位国家模式全比对；Code 128 码集 A/B/C 自动择优、SHIFT 切换、校验和 mod 103）。