@composy/barcode-vue

@composy/barcode-vue

Vue 3 适配包，提供条形码组件、图片扫描组件、composable、directive 和插件。

组件

• <Barcode>：响应式生成 Canvas 或 SVG 条形码。
• <BarcodeScanner>：文件选择、单文件扫描、批量扫描、预览、空状态和错误状态。
• useBarcode()：生成、更新、导出和销毁条形码实例。
• useBarcodeScanner()：扫描文件、图片元素、ImageData 和文件数组。
• vBarcode：在已有元素上生成条形码。
• BarcodePlugin / BarcodeEnginePlugin：Vue 原生或 LDesign Engine 插件。

快速开始

<script setup lang="ts">
import { Barcode, BarcodeScanner } from '@composy/barcode-vue'
import '@composy/barcode-vue/index.css'

function handleScan(results: unknown) {
  console.log(results)
}
</script>

<template>
  <Barcode content="5901234123457" format="EAN13" render-type="svg" size="comfortable" />
  <BarcodeScanner multiple @scan="handleScan" />
</template>

Barcode 的必填属性是 content；格式值使用 Core 的 BarcodeFormat 枚举或对应字符串。BarcodeScanner 会在组件卸载时释放预览 Blob URL，并忽略过期的异步扫描结果。扫描配置可使用 Core 导出的 ScannerOptions 或兼容别名 BarcodeScannerOptions；图片解码只在浏览器客户端执行，SSR 阶段应等挂载后再触发扫描。

useBarcode() 额外暴露 whenReady()、getConfig() 和 getEncoded()，适合在表单提交、打印或导出前读取实例状态；没有已创建实例时，快照方法返回 null，等待方法立即完成。

样式约束

运行时 class 使用 ldesign- 前缀，例如 ldesign-barcode、ldesign-barcode-scanner 和 ldesign-barcode-scanner__result。

样式中的颜色来自 packages/color 的 --ld-* Variables，尺寸、间距、圆角和像素度量来自 packages/size Variables；引入 @composy/barcode-vue/index.css 即可使用默认样式。

插件

import { createApp } from 'vue'
import { BarcodePlugin } from '@composy/barcode-vue'

createApp(App).use(BarcodePlugin, {
  prefix: 'L',
  registerDirective: true,
})

工具箱同时提供 validateEncoded(data)，用于在提交前校验格式和校验位；长时间批量扫描可通过 Core 的 ScannerOptions.signal 取消，并用 ownerDocument 指定 iframe 的 DOM realm。

验证

pnpm run type-check
pnpm run lint:check
pnpm run build

构建使用 @composy/builder + rolldown，生成 dist、es、esm、lib、声明文件和样式入口。

Builder、ESLint 与 ESM/CJS TypeScript 权威配置位于 .ldesign/；包根的 eslint.config.js、tsconfig.json 和 tsconfig.cjs.json 是兼容转发配置。构建后会归一化并检查包输出。

工作区 README · Core README