@composy/barcode-vue

Vue 3 适配包，提供条形码组件、扫描组件、组合式 API、指令和插件。

功能

• <Barcode />：响应式条形码渲染，支持 canvas / svg
• <BarcodeScanner />：图片扫描、批量扫描、预览、清空、空态、错误态
• useBarcode()：生成、更新、下载、导出
• useBarcodeScanner()：扫描文件、图片、ImageData 和批量文件
• useBarcodeCatalog()：消费 core 的格式目录、presets 和 templates
• vBarcode：指令式渲染
• BarcodePlugin / BarcodeEnginePlugin：Vue 原生插件和 LDesign Engine 插件

快速开始

<template>
  <Barcode content="5901234123457" format="EAN13" render-type="svg" size="comfortable" />

  <BarcodeScanner multiple @scan="handleScan" @error="handleError" />
</template>

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

function handleScan(results: unknown[]) {
  console.log(results)
}

function handleError(error: Error) {
  console.error(error)
}
</script>

样式规范

所有运行时 class 都使用 ldesign- 前缀：

• ldesign-barcode
• ldesign-barcode__canvas
• ldesign-barcode-scanner
• ldesign-barcode-scanner__result
• ldesign-barcode-directive

颜色全部从 packages/color 的 CSS Variables 派生，例如 --ld-gray-*、--ld-primary-*、--ld-danger-*。

尺寸、圆角、边框和字号优先使用 packages/size 的 CSS Variables，例如 --size-*，并提供 --ld-* fallback 以兼容 size 包默认前缀。

如果需要显式加载样式：

import '@composy/barcode-vue/index.css'

插件

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

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

构建与验证

pnpm --filter @composy/barcode-vue type-check
pnpm --filter @composy/barcode-vue build

build 会通过 @composy/builder 生成 dist、es、esm、lib，并校验 dist/index.min.js、dist/index.min.css 等发布入口存在。