前言：哈喽，大家好，我是前端菜鸟的自我修养！今天给大家分享Vue3使用jsbarcode生成条形码，以及循环生成条形码，介绍了JsBarcode插件的详细使用方法，并提供具体代码帮助大家深入理解，彻底掌握！原创不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕

PS：本人上一篇还讲到了【如何使用Vue2和微信小程序生成二维码和条形码】，荣登全站热榜第一，欢迎感兴趣的小伙伴阅读Vue项目和微信小程序生成二维码和条形码

🌈🌈文章目录

一、安装依赖

二、main.js中全局引入

三、定义组件

四、使用组件

1、引入

2、注册

3、使用

4、完整代码如下

5、效果如下

6、注意事项

五、循环生成条形码

1、组件CycleBarcode

2、使用组件

引入

注册

使用

完整代码

效果如下

一、安装依赖

npm install jsbarcode --save

二、main.js中全局引入

 import JsBarcode from 'jsbarcode'

app.config.globalProperties.jsbarcode = JsBarcode

代码如下：

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import JsBarcode from 'jsbarcode'

const app = createApp(App).use(router)

app.config.globalProperties.jsbarcode = JsBarcode

app.mount('#app')

三、定义组件

<template>

<div>

<svg class="barcode" ></svg>code>

</div>

</template>

<script setup>

import { ref, onMounted, nextTick } from 'vue'

import JsBarcode from 'jsbarcode'

const props = defineProps({

// 数据

// 当前的值

value: String

});

onMounted(() => {

nextTick(() => {

JsBarcode('.barcode', String(props.value), {

format: "CODE39",//选择要使用的条形码类型

width:1,//设置条之间的宽度

height:40,//高度

displayValue:true,//是否在条形码下方显示文字

// text:"456",//覆盖显示的文本

// fontOptions:"bold italic",//使文字加粗体或变斜体

// font:"fantasy",//设置文本的字体

// textAlign:"left",//设置文本的水平对齐方式

// textPosition:"top",//设置文本的垂直位置

// textMargin:5,//设置条形码和文本之间的间距

fontSize:15,//设置文本的大小

// background:"#eee",//设置条形码的背景

// lineColor:"#2196f3",//设置条和文本的颜色。

margin:15//设置条形码周围的空白边距

});

})

})

</script>

四、使用组件