Skip to content

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是否在底部绘制明文文本Booleantrue | falsetrue
fontSize底部明文文本字号 (px)Number-12

基于 MIT 协议开源发行

H5 模拟器 (barcode)☀️🔄