LimeBarcode

• uniapp vue3 生成条形码插件，插件核心源于JsBarcode
• uniappx app 需要导入lime-barcodegen

安装

在 导入即可

注意

• uniappx app 需要导入lime-barcodegen
• uniappx app 条形码类型，目前仅支持 EAN13、CODE39、CODE128、codabar

代码演示

基础使用

<l-barcode text="1234567890128" lineWidth="4rpx" lineLength="30px" lineColor="blue" format="ean13" margin="5px"></l-barcode>

生成图片

• 1、通过调用插件的canvasToTempFilePath方法生成图片。

<image v-if="image" :src="image" style="width: 300rpx;" mode="widthFix"></image>
<l-barcode ref="barcodeRef" text="1234567890128"></l-barcode>
<button @click="onClick">生成图片</button>

// vue3
const barcodeRef = ref(null)
const onClick = () => {
	if(!barcodeRef.value) return
	barcodeRef.value.canvasToTempFilePath({
		success(res) {
			image.value = res.tempFilePath
			console.log('success:::', res)
		},
		fail(err) {
			console.log('err:::', err)
		}
	})
}

// vue2
const el = this.$refs['barcodeRef'] 
el.canvasToTempFilePath({
	success:(res)=>{
		this.image = res.tempFilePath
	},
	fail(err) {
		console.log('err:::', err)
	}
})

// uvue
const el:LBarcodeComponentPublicInstance = this.$refs['barcodeRef'] as LBarcodeComponentPublicInstance 
el.canvasToTempFilePath({
	success:(res: UTSJSONObject)=>{
		this.image = res['tempFilePath']
	},
	fail(err: UTSJSONObject) {
		console.log('err:::', err)
	}
})

• 2、通过设置useCanvasToTempFilePath在success事件里接收图片地址

<image v-if="image" :src="image" style="width: 300rpx;" mode="widthFix"></image>
<l-barcode useCanvasToTempFilePath @success="success" text="1234567890128"></l-barcode>

const image = ref(null)
const success = (img) => {
	image.value = img
}

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可

// main.js vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

查看示例

• 导入后直接使用这个标签查看演示效果

// 代码位于 uni_modules/lime-barcode/compoents/lime-barcode
<lime-barcode />

插件标签

• 默认 l-barcode 为 component
• 默认 lime-barcode 为 demo

API

Props

参数	类型	默认值	说明
format	String	code128	要使用的条形码类型。提示：微信APP扫码支持的条码类型有 code128\code39\ean13\ean8\upc\itf14
width	`Number	String`	2
height	`Number	String`	60
displayValue	Boolean	true	是否在条形码下方显示文字
text	String	1234567890128	条码内容
textAlign	String	center	可选值:left\right,设置文本的水平对齐方式
textPosition	String	bottom	可选值top,设置文本的垂直位置
textMargin	`Number	String`	5
fontSize	`Number	String`	24
fontColor	String(color)	#000000	设置文本的颜色
lineColor	String(color)	#000000	设置条形码的颜色
background	String(color)	#FFFFFF	设置条形码的背景色
margin	`Number	String`	0
marginTop	`Number	String`
marginBottom	`Number	String`
marginLeft	`Number	String`
marginRight	`Number	String`

常见问题

• 微信APP扫码支持的条码类型有 code128\code39\ean13\ean8\upc\itf14

感谢

jsBarcode

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码