BarCode

Generates one-dimensional barcodes based on JsBarcode. Supports common barcode formats across H5, mini programs, and App.

Component Type

Basic Usage

Set the barcode content with value. The default format is auto.

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

Common Formats

Use format to specify the barcode type, such as EAN13, CODE39, or ITF14.

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

Component Variant

Text Position

Use text-position to place text above or below the barcode.

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

Text Margin

Use text-margin to adjust the spacing between text and barcode.

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

Hide Text

Use display-value to control whether the text is shown.

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

Component Style

Custom Colors

Use line-color and background to customize the barcode colors.

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

Custom Size

Use width to set the overall barcode width, and height to set the overall render height including vertical margins, bars, and text.

<!-- Set the overall width -->
<wd-bar-code value="1234567890" :width="260" :height="80" />

<!-- Wide and compact size -->
<wd-bar-code value="1234567890" :width="320" :height="50" />

<!-- Increase overall barcode height -->
<wd-bar-code value="1234567890" :height="140" />

<!-- Hide text for a compact size -->
<wd-bar-code value="1234567890" :height="60" :display-value="false" />

Font Style

Use font-size to set the maximum text size. Text automatically shrinks when it exceeds the available width. Use font-options to set text style. Supported values are bold, italic, and 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" />

Special Style

Supported Formats

The component supports CODE128, CODE128A, CODE128B, CODE128C, EAN13, EAN8, UPC, UPCE, CODE39, ITF14, MSI, MSI10, MSI11, MSI1010, MSI1110, pharmacode, and codabar.

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

Special Format Sizes

EAN8, UPC, and UPCE can also be displayed with custom sizes.

<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" />

Export Image

Call exportImage() on the component instance to export the current barcode image.

<template>
  <view>
    <wd-bar-code ref="barCodeRef" value="1234567890" />
    <wd-button icon="download" size="small" @click="handleExportImage">Export Image</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

Property	Description	Type	Default
value v2.0.5	Barcode content	string | number	-
format v2.0.5	Barcode format. Supported values: auto, CODE128, CODE128A, CODE128B, CODE128C, EAN13, EAN8, UPC, UPCE, CODE39, ITF14, MSI, MSI10, MSI11, MSI1010, MSI1110, pharmacode, codabar	string	auto
width v2.0.5	Overall barcode width; must be a finite, positive number	number	200
height v2.0.5	Overall render height, including vertical margins, bars, and text	number	100
text v2.0.5	Custom display text. Defaults to the encoder-generated text, including automatically added check digits	string	''
font v2.0.5	Font family	string	monospace
font-size v2.0.5	Maximum text size; shrinks automatically to fit the available width	number	20
font-options v2.0.5	Font style. Supported values: bold, italic, bold italic	string	''
text-margin v2.0.5	Spacing between text and barcode; must be a finite, non-negative number	number	2
background v2.0.5	Background color	string	#ffffff
line-color v2.0.5	Line color	string	#000000
margin v2.0.5	Margin; must be a finite, non-negative number	number	10
margin-top v2.0.5	Top margin; must be a finite, non-negative number. Falls back to margin when omitted	number	-
margin-bottom v2.0.5	Bottom margin; must be a finite, non-negative number. Falls back to margin when omitted	number	-
margin-left v2.0.5	Left margin; must be a finite, non-negative number. Falls back to margin when omitted	number	-
margin-right v2.0.5	Right margin; must be a finite, non-negative number. Falls back to margin when omitted	number	-
display-value v2.0.5	Whether to display text	boolean	true
text-align v2.0.5	Text alignment: left, center, right. Applies to ordinary formats and custom text; default digits in EAN13, EAN8, UPC and UPCE remain centered within their segments	string	center
text-position v2.0.5	Text position. Supported values: bottom, top	string	bottom

BarCode Events

Event	Description	Arguments
error v2.0.5	Triggered when rendering fails	error
valid v2.0.5	Triggered whenever encoding validation completes, even if the result is unchanged. Indicates whether the content is valid for encoding, not whether rendering or export succeeded	valid: boolean

BarCode Methods

Method	Description	Arguments	Return value
exportImage v2.0.5	Exports the barcode image	-	Promise<string>

External Classes

Class	Description
custom-class	Root node class

Source Code

Documentation

• Component