Barcode 条码
生成各种格式的条码，支持多种样式和主题。
基础用法
最基本的条码生成。
vue
<template>
<ex-barcode value="123456789012" />
</template>1
2
3
2
3
条码格式
支持多种常见的条码格式。
CODE128 (默认)
EAN-13 (商品条码)
CODE39
UPC-A
vue
<template>
<!-- CODE128 (默认) -->
<ex-barcode value="Hello World" format="CODE128" />
<!-- EAN-13 (商品条码) -->
<ex-barcode value="5901234123457" format="EAN13" />
<!-- CODE39 -->
<ex-barcode value="CODE39" format="CODE39" />
<!-- UPC-A -->
<ex-barcode value="012345678905" format="UPC" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
自定义尺寸
调整条码的宽度和高度。
小尺寸
中等尺寸 (默认)
大尺寸
vue
<template>
<!-- 小尺寸 -->
<ex-barcode value="123456" :width="1" :height="50" />
<!-- 中等尺寸 (默认) -->
<ex-barcode value="123456" :width="2" :height="100" />
<!-- 大尺寸 -->
<ex-barcode value="123456" :width="3" :height="150" />
</template>1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
赛博朋克风格
提供霓虹和赛博朋克风格的条码样式。
默认样式
霓虹样式
赛博朋克样式
vue
<template>
<!-- 默认样式 -->
<ex-barcode value="DEFAULT123" type="default" />
<!-- 霓虹样式 -->
<ex-barcode value="NEON456" type="neon" />
<!-- 赛博朋克样式 -->
<ex-barcode value="CYBER2077" type="gaming" />
</template>1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
自定义颜色
自定义条码的线条颜色和背景颜色。
蓝色条码
粉色条码
绿色条码
vue
<template>
<!-- 蓝色条码 -->
<ex-barcode value="BLUE123" line-color="#29abe2" background="#0b0f14" />
<!-- 粉色条码 -->
<ex-barcode value="PINK456" line-color="#ff007f" background="#1a0a1e" />
<!-- 绿色条码 -->
<ex-barcode value="GREEN789" line-color="#00ff41" background="#000000" />
</template>1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
文本显示
控制条码下方文本的显示和位置。
显示文本 (默认)
隐藏文本
文本在顶部
自定义字体大小
vue
<template>
<!-- 显示文本 (默认) -->
<ex-barcode value="123456" :display-value="true" />
<!-- 隐藏文本 -->
<ex-barcode value="123456" :display-value="false" />
<!-- 文本在顶部 -->
<ex-barcode value="123456" text-position="top" />
<!-- 自定义字体大小 -->
<ex-barcode value="123456" :font-size="24" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
下载功能
支持下载条码为图片。
vue
<template>
<div>
<ex-barcode ref="barcodeRef" value="DOWNLOAD123" />
<ex-button @click="handleDownload">下载条码</ex-button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const barcodeRef = ref();
const handleDownload = () => {
barcodeRef.value?.download('my-barcode.png');
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 条码值 | string | '' |
| format | 条码格式 | BarcodeFormat | 'CODE128' |
| width | 条码宽度 | number | 2 |
| height | 条码高度 | number | 100 |
| display-value | 是否显示文本 | boolean | true |
| text-position | 文本位置 | 'top' / 'bottom' | 'bottom' |
| text-margin | 文本边距 | number | 2 |
| font-size | 字体大小 | number | 20 |
| font | 字体 | string | 'monospace' |
| text-align | 文本对齐 | 'left' / 'center' / 'right' | 'center' |
| line-color | 线条颜色 | string | '#000000' |
| background | 背景颜色 | string | '#ffffff' |
| margin | 边距 | number | 10 |
| flat | 是否平滑 | boolean | false |
| type | 样式类型 | 'default' / 'neon' / 'gaming' (赛博朋克) | 'default' |
| bordered | 是否显示边框 | boolean | true |
| border-radius | 圆角 | number | 8 |
| error-text | 错误提示文本 | string | — |
| aria-label | 无障碍标签 | string | — |
Barcode Format
支持的条码格式：
CODE128- CODE128 (默认，最常用)CODE39- CODE39EAN13- EAN-13 (商品条码，13位数字)EAN8- EAN-8 (8位数字)UPC- UPC-A (12位数字)ITF14- ITF-14 (14位数字)MSI- MSIpharmacode- Pharmacodecodabar- Codabar
Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| error | 错误状态插槽 |
Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| download | 下载条码 | (filename?: string) |
| toDataURL | 获取条码数据URL | (type?: 'image/png' / 'image/jpeg') |
| refresh | 刷新条码 | — |