Barcode 条形码 4.4.0

条形码组件，支持多种条形码格式，可以生成条形码图片或Canvas，本插件使用canvas原生实现，不依赖第三方插件，体积较小。 支持CODE128/EAN13/EAN8/EAN5/EAN2/UPC/UPCA，ITF、pharmacode、codabar暂未支持，后期会增加支持。

基本使用

通过value设置条形码内容，通过format设置条形码格式。

设置条形码尺寸

通过width和height设置条形码尺寸。

<template>
  <view>
    <up-barcode 
      value="1234567890" 
      :width="300"
      :height="100"
    />
  </view>
</template>

<script setup>
</script>

设置条形码颜色

通过lineColor设置条形码线条颜色，通过[background]设置背景色。

<template>
  <view>
    <up-barcode 
      value="1234567890" 
      line-color="#ff0000"
      background="#f5f5f5"
    />
  </view>
</template>

<script setup>
</script>

显示文本

通过displayValue控制是否显示文本，通过text设置文本内容。

<template>
  <view>
    <up-barcode 
      value="1234567890" 
      :display-value="true"
      text="商品条码"
    />
  </view>
</template>

<script setup>
</script>

禁用Canvas渲染

通过useCanvas控制是否使用Canvas渲染，默认为true。

<template>
  <view>
    <up-barcode 
      value="1234567890" 
      :use-canvas="false"
    />
  </view>
</template>

<script setup>
</script>

Props

参数	说明	类型	默认值	可选值
value	条码值	string | number	-	-
format	条码格式	string	auto	CODE128/CODE128A/CODE128B/CODE128C/EAN13/EAN8/EAN5/EAN2/UPC/UPCA/UPCE/CODE39/ITF/ITF14/MSI/MSI10/MSI11/MSI1010/MSI1110/pharmacode/codabar
width	宽度	number	200	-
height	高度	number	80	-
displayValue	是否显示文本	boolean	true	false
text	文本内容	string	-	-
fontOptions	字体选项	string	-	-
font	字体	string	monospace	-
textAlign	文本对齐方式	string	center	left/center/right
textPosition	文本位置	string	bottom	top/bottom
textMargin	文本边距	number	2	-
fontSize	字体大小	number	14	-
background	背景色	string	#ffffff	-
lineColor	条码颜色	string	#000000	-
margin	边距	number	10	-
marginTop	上边距	number	undefined	-
marginBottom	下边距	number	undefined	-
marginLeft	左边距	number	undefined	-
marginRight	右边距	number	undefined	-
useCanvas	使用canvas还是生成图片	boolean	true	false

Events

事件名	说明	回调参数
rendered	渲染完成时触发	{ type: 'canvas' | 'image', id?: string, value?: string, path?: string }
error	渲染出错时触发	error

支持格式说明

格式	说明
CODE128	最常用的条形码格式，可编码所有ASCII字符
EAN13	国际商品条形码，13位数字
EAN8	国际商品条形码，8位数字
CODE39	39字符条形码，常用于工业领域
UPC	统一产品代码

注意事项

1. 条形码内容需要符合对应格式的规范，否则会报错
2. 使用Canvas渲染时性能更好，但生成图片可以保存到相册
3. 文本显示时会自动根据条码尺寸调整位置
4. 不同格式的条码对内容要求不同，请根据实际需求选择格式