Barcode 条形码
全端通用条形码生成组件,基于 Code128B 编码标准,用于商品条码、快递单号、核销券码等场景的高清生成与秒级扫码识别。
代码示例
1. 基础用法 (Basic Usage)
vue
<template>
<mu-barcode value="690123456789" :width="300" :height="90" />
</template>2. 隐藏底部数字文本 (Hide Text)
设置 show-text="false" 仅绘制条形码图线。
vue
<template>
<mu-barcode value="MUZHIYU-2026-X8" :show-text="false" />
</template>3. 自定义条码颜色与背景 (Custom Color)
配置 foreground 条码线条颜色与 background 容器背景色。
vue
<template>
<mu-barcode
value="SF1029384756"
foreground="#4F46E5"
background="#EEF2FF"
/>
</template>API 属性说明 (Props)
| 参数名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 待生成的条形码字符串 (支持数字、英文、标准符号) | String | - | '' |
| width | 条形码宽度 (px) | Number | - | 300 |
| height | 条形码高度 (px) | Number | - | 80 |
| foreground | 条码线条及底部文字颜色 | String | - | '#000000' |
| background | 背景颜色 | String | - | '#ffffff' |
| showText | 是否在底部绘制明文文本 | Boolean | true | false | true |
| fontSize | 底部明文文本字号 (px) | Number | - | 12 |