1、安装jsbarcode
npm install jsbarcode --save
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>
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)=>{
JsBarcode('#jsbarcodeImg' + index, v, {
format: 'CODE39',
width: 2,
height: 40
})
})
}
</script>