更新记录

0.0.1（2024-01-19）

• 首次上传

平台兼容性

lime-barcode

• uniapp vue3 生成条形码插件，插件核心源于JsBarcode
• 仅在H5、微信小程序，Uvue
• uvue 需要导入lime-barcodegen

使用

• 导入插件后直接使用
• uvue 需要导入lime-barcodegen
• uvue 条形码类型，目前仅支持 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: TakeSnapshotSuccess)=>{
        this.image = res.tempFilePath
    },
    fail(err: TakeSnapshotFail) {
        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)

另外插件也用到了TS，vue2可能会遇过官方的TS版本过低的问题,找到HX目录下的compile-typescript目录

// \HBuilderX\plugins\compile-typescript
yarn add typescript -D
- or - 
npm install typescript -D

查看示例

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

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

插件标签

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

API

Props

常见问题

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

感谢

jsBarcode

打赏

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