uview-plus

# Barcode 条形码 3.1.83

打开

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

# 基本使用

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

# 设置条形码尺寸

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

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

<script>
  export default {
    
  }
</script>

# 设置条形码颜色

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

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

<script>
  export default {
    
  }
</script>

# 显示文本

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

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

<script>
  export default {
    
  }
</script>

# 禁用Canvas渲染

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

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

<script>
  export default {
    
  }
</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 统一产品代码
<!-- ITF
MSI MSI Plessey条码，用于仓库和库存管理
pharmacode 药品包装上使用的条码
codabar 医疗和图书馆使用的条码

# 注意事项

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

← Cropper 图片裁剪 →