GG

# gg-draw-barcode 绘制条形码

gg-draw-barcode

此条形码组件的条形码生成部分移植改造自jsBarcode.js (opens new window)，精简了代码，移除无效属性，增加了点新属性，使其能够在uni-app中运行。

# 支持生成的条形码类型↓

CODE128 EAN CODE39 ITF MSI Pharmacode Codabar
CODE128 EAN-13 CODE39 ITF MSI Pharmacode Codabar
CODE128 A/B/C EAN-8 ITF - 14 MSI10
EAN-5 MSI11
EAN-2 MSI1010
UPC (A) MSI1110
UPC (E)

微信APP能够扫码识别的条形码类型：code128\code39\ean13\ean8\upc\itf14

注意：使用时请遵循条码类型规范，否则无法生成或报错。条形码只支持英文、数字、和一些常规符号，其它的会报错，非要生成中文或其它符号请自行转换为unicode码

# 重要的事情说3遍：请使用1.9.6或以上版本！请使用1.9.6或以上版本！请使用1.9.6或以上版本！

# 使用方法

在 script 中引入组件

import ggDrawBarcode from "@/components/gg-draw-barcode/gg-draw-barcode.vue"
export default {
    components: {ggDrawBarcode}
}
1
2
3
4

在 template 中使用

<view>
    <gg-draw-barcode
    ref="barcode"
    :show="show"
    :format="format"
    :cid="cid"
    :val="val"
    :unit="unit"
    :opations="opations"
    :onval="onval"
    :loadMake="loadMake"
    @result="barresult" />
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 属性

属性名 类型 默认值 可选值 说明
cid String tki-barcode-canvas canvasId，页面存在多个条形码组件时需设置不同的ID
unit String px upx 单位
show Boolean true 默认使用组件中的image标签显示条形码
format String code128 code128\code39\ean13\ean8\upc\itf14 条形码类型
val String 1234567890128 要生成的内容
opations JSON 见下表 条形码参数
onval Boolean false 监听val值变化自动重新生成条形码
loadMake Boolean true 组件初始化完成后自动生成条形码，val需要有值

# opations

属性名 类型 默认值 可选值 说明
format String code128 要使用的条形码类型。
提示：微信APP扫码支持的条码类型有 code128\code39\ean13\ean8\upc\itf14
width Number 4 设置条之间的宽度
height Number 120 设置条的高度
displayValue Boolean true 是否在条形码下方显示文字
text String 1234567890128 条码内容（会覆盖val属性）
textAlign String center left\right 设置文本的水平对齐方式
textPosition String bottom top 设置文本的垂直位置
textMargin Number 5 top 设置文本的垂直位置
fontSize Number 24 设置文本的大小
fontColor String(color) #000000 设置文本的颜色
lineColor String(color) #000000 设置条形码的颜色
background String(color) #FFFFFF 设置条形码的背景色
margin Number 0 设置条形码周围的空白边距
marginTop Number undefined 设置条形码周围的上边距
marginBottom Number undefined 设置条形码周围的下边距
marginLeft Number undefined 设置条形码周围的左边距
marginRight Number undefined 设置条形码周围的右边距

# 方法

方法名 参数 默认值 说明
_makeCode() 生成条形码
_clearCode() 清空条形码（清空条形码会触发result回调 返回值为空）
_saveCode() 保存条形码到图库

# 事件

事件名 返回值 说明
result 生成的图片base64或图片临时地址 返回条形码路径 注：_clearCode()后返回空

# 感谢

uni-app (opens new window) jsBarcode (opens new window) tki-barcode (opens new window)

← 圆形进度 →