Barcode 条形码

根据内容绘制 EAN-13 或 Code 128 条形码。画布就绪后需调用组件实例的 draw 方法。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<template>
  <!-- 画布就绪后绘制 -->
  <fui-barcode ref="barcodeRef" value="123456789012" @ready="drawBarcode" />
</template>

<script>
export default {
  methods: {
    /** 画布就绪后绘制条形码 */
    drawBarcode() {
      this.$refs.barcodeRef.draw();
    }
  }
};
</script>

属性

属性	类型	说明	官网默认值
width	Number / String	宽度，单位 rpx	480
height	Number / String	高度，单位 rpx	200
value	Number / String	条形码内容	-
type	Number / String	1 EAN-13，2 Code 128	1

方法

draw(options) 绘制条形码。EAN-13 模式的本地选项包括 number、prefix、color、debug 及校验、绘制回调；Code 128 使用另一套绘制实现。调用前应确保内容符合相应编码规则。

事件

事件	说明	回调参数
ready	画布初始化完成	{ canvasId }
longclick	长按约 500 毫秒	{}
touchStart	触摸开始	{}
touchEnd	触摸结束	{}

插槽

插槽	说明
—	官网未列出该组件的插槽