BarCode 条形码

用于生成一维条形码，基于 JsBarcode 实现，支持多种常见条码格式，可在 H5、小程序和 App 端使用。

组件类型

基本用法

通过 value 设置条形码内容，默认使用 auto 格式。

<wd-bar-code value="1234567890" />

常见格式

通过 format 指定条码格式，例如 EAN13、CODE39、ITF14。

<wd-bar-code value="690123456789" format="EAN13" />
<wd-bar-code value="CODE39" format="CODE39" />
<wd-bar-code value="1234567890123" format="ITF14" />

组件变体

文字位置

通过 text-position 控制文字显示在条码上方或下方。

<wd-bar-code value="1234567890" text-position="top" />
<wd-bar-code value="1234567890" text-position="bottom" />

文字间距

通过 text-margin 调整文字与条码之间的间距。

<wd-bar-code value="1234567890" :text-margin="10" />

隐藏文字

通过 display-value 控制是否显示条码文本。

<wd-bar-code value="1234567890" :display-value="false" />

组件样式

自定义颜色

通过 line-color 和 background 分别设置线条颜色和背景色。

<wd-bar-code value="1234567890" line-color="#4D80F0" background="#E0EAFF" />

自定义尺寸

通过 width 调整条形码整体宽度，通过 height 调整包含上下留白、条和文本在内的整体高度。

<!-- 指定整体宽度 -->
<wd-bar-code value="1234567890" :width="260" :height="80" />

<!-- 宽而矮的紧凑尺寸 -->
<wd-bar-code value="1234567890" :width="320" :height="50" />

<!-- 增加条形码整体高度 -->
<wd-bar-code value="1234567890" :height="140" />

<!-- 隐藏文字后做紧凑尺寸 -->
<wd-bar-code value="1234567890" :height="60" :display-value="false" />

字体样式

通过 font-size 设置条码文本的最大字号，文本宽度超出可用空间时会自动缩小。通过 font-options 设置文字样式，可选值为 bold、italic、bold italic。

<wd-bar-code value="1234567890" :font-size="14" />
<wd-bar-code value="1234567890" :font-size="24" />
<wd-bar-code value="1234567890" font-options="bold italic" />

特殊样式

支持格式

组件支持 CODE128、CODE128A、CODE128B、CODE128C、EAN13、EAN8、UPC、UPCE、CODE39、ITF14、MSI、MSI10、MSI11、MSI1010、MSI1110、pharmacode、codabar 等格式。

<wd-bar-code value="690123456789" format="EAN13" />
<wd-bar-code value="A123456A" format="codabar" />

特殊格式尺寸

EAN8、UPC、UPCE 这类格式也可以单独调整宽高。

<wd-bar-code value="1234567" format="EAN8" :width="210" :height="120" />
<wd-bar-code value="12345678901" format="UPC" :width="240" :height="130" />
<wd-bar-code value="123456" format="UPCE" :width="200" :height="110" />

导出图片

通过组件实例调用 exportImage() 导出当前条形码图片。

<template>
  <view>
    <wd-bar-code ref="barCodeRef" value="1234567890" />
    <wd-button icon="download" size="small" @click="handleExportImage">导出图片</wd-button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { BarCodeInstance } from '@/uni_modules/wot-ui/components/wd-bar-code/types'

const barCodeRef = ref<BarCodeInstance | null>(null)

async function handleExportImage() {
  const path = await barCodeRef.value?.exportImage()
  console.log(path)
}
</script>

BarCode Attributes

参数	说明	类型	默认值
value v2.0.5	条形码内容	string | number	-
format v2.0.5	条形码格式，可选值为 auto、CODE128、CODE128A、CODE128B、CODE128C、EAN13、EAN8、UPC、UPCE、CODE39、ITF14、MSI、MSI10、MSI11、MSI1010、MSI1110、pharmacode、codabar	string	auto
width v2.0.5	条形码整体宽度，必须为有限正数	number	200
height v2.0.5	条形码整体渲染高度，包含上下留白、条和文本	number	100
text v2.0.5	自定义显示文本，默认使用编码器生成的文本，包含自动补充的校验位	string	''
font v2.0.5	字体	string	monospace
font-size v2.0.5	文本最大字号，宽度不足时自动缩小	number	20
font-options v2.0.5	字体样式，可选值为 bold、italic、bold italic	string	''
text-margin v2.0.5	文本与条码的间距，必须为有限非负数	number	2
background v2.0.5	背景色	string	#ffffff
line-color v2.0.5	线条颜色	string	#000000
margin v2.0.5	边距，必须为有限非负数	number	10
margin-top v2.0.5	上边距，必须为有限非负数，未设置时使用 margin	number	-
margin-bottom v2.0.5	下边距，必须为有限非负数，未设置时使用 margin	number	-
margin-left v2.0.5	左边距，必须为有限非负数，未设置时使用 margin	number	-
margin-right v2.0.5	右边距，必须为有限非负数，未设置时使用 margin	number	-
display-value v2.0.5	是否显示文本	boolean	true
text-align v2.0.5	文本对齐方式，可选值为 left、center、right；适用于普通格式及自定义文本，EAN13、EAN8、UPC、UPCE 的默认数字保持分段居中	string	center
text-position v2.0.5	文本位置，可选值为 bottom、top	string	bottom

BarCode Events

事件名称	说明	参数
error v2.0.5	生成失败时触发	error
valid v2.0.5	每次编码校验完成时触发，即使结果未变化；仅表示编码内容是否合法，不代表绘制或导出成功	valid: boolean

BarCode Methods

方法名	说明	参数	返回值
exportImage v2.0.5	导出条形码图片	-	Promise<string>

外部样式类

类名	说明
custom-class	根节点样式类

源代码

文档

• 组件