vue3.0 + JsBarcode 循环生成多个条形码(setup语法糖)

1、安装jsbarcode

npm install jsbarcode --save
1

2、html页面循环数据

//id动态绑定，使用类名加index
<div class='js_barcode'>
	<div v-for='(item,index) in jsBarcodeList ' :key='index'>
		<img :id="'jsbarcodeImg' + index" style="width:260px" />
	</div>
</div>
1
2
3
4
5
6

3、在vue页面中的script标签中引入jsbarcode

<script setup>
import { onMounted, ref } from 'vue'
//引入
import JsBarcode from 'jsbarcode'
//定义要循环的条形码数据
const jsBarcodeList = ref(['ETC6987','VIP6666','TXSH7845'])

//周期函数
onMounted(()=>{
	setTimeout(() => {
    	generateJSBarcodeImg()
  	}, 500)
})

//循环生成条形码
function generateJSBarcodeImg(){
	jsBarcodeList.forEach((v,index)=>{
		// 根据动态id，动态赋值，动态生成条形码
      JsBarcode('#jsbarcodeImg' + index, v, {
        format: 'CODE39',
        width: 2,
        height: 40
      })
	})
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26