Barcode 条形码 
概述
Barcode 条形码，用于展现条形码信息。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
使用前请先阅读uni-app官方 canvas组件 (opens new window) 注意事项。
保存条形码图片，可根据@ready事件返回的canvasId自行完成保存功能。
Nvue下Canvas是作为独立的模块，云端打包时需要选择使用Canvas模块才能正常使用相关的功能。 需要在manifest.json的代码视图中配置如下（暂时还不支持可视化界面操作）：
"app-plus" : {
/* 模块配置 */
"modules" : {
"Canvas" : "nvue canvas" //使用Canvas模块
}
}
1
2
3
4
5
6
2
3
4
5
6
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiBarcode from "@/components/firstui/fui-barcode/fui-barcode.vue"
export default {
components:{
fuiBarcode
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序和文档API。
组件初始化
通过 value 属性设置条形码内容。
通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。
<fui-barcode ref="barcode" :value="val"></fui-barcode>
1
data() {
return {
val: '6937147252044'
}
},
onReady() {
setTimeout(()=>{
this.barcode()
},50)
},
methods: {
barcode() {
if(String(this.val).length === 13){
//生成条形码
this.$refs.barcode.draw()
}else{
this.fui.toast('请输入13位条形码！')
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Slots
| 名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| width | Number, String | 条形码宽度，单位rpx | 480 | - |
| height | Number, String | 条形码高度，单位rpx | 200 | - |
| value | Number, String | 条形码内容，13位数字 | - | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @ready | 组件初始化完成时触发 | { canvasId:唯一标识符 } |
| @longclick | 手指长按 500ms 之后触发 | - |
| @touchStart | 手指触摸动作开始 | - |
| @touchEnd | 手指触摸动作结束 | - |
# Methods
通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。
| 方法名 | 说明 | 传入参数 |
|---|---|---|
| draw | 生成条形码 | 详细参数见下方说明 |
// draw 方法参数 Object
{
//是否显示数字
number: true,
//是否显示国家前缀
prefix: true,
//条形码的颜色
color: '#181818',
//是否开启调试
debug: false,
//验证条形码合法的回调函数
onValid() {},
//验证条形码不合法的回调函数
onInvalid() {},
//条形码生成成功的回调函数
onSuccess() {},
//条形码生成失败的回调函数
onError() {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
TIP
注：若 nvue android端报以下错误，暂时不用处理！
reportJSException >>>> exception function:gcanvas setBackGround for android view,
exception:WX_RENDER_ERR_TEXTURE_SETBACKGROUND:
TextureView doesn't support displaying a background drawable!
1
2
3
2
3
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。