vue+jsbarcode实现条码预览功能

bash 复制代码
npm install jsbarcode
html 复制代码
<template>  
    <div>  
        <div v-for="(barcodeData, index) in barcodeDataArray" :key="index">  
            <svg :id="'barcode' + index" :data-barcode="barcodeData.value"></svg>  
            <p class="barcode-value">{{ barcodeData.value }}</p>  
        </div>  
        <button @click="add">添加一个二维码</button>
    </div>  
</template>  
  
<script setup>  
import { onMounted, reactive, nextTick  } from 'vue';  
import JsBarcode from 'jsbarcode';  
  
// 使用 reactive 创建一个响应式对象来存储条形码数据数组  
const barcodeDataArray = reactive([
    { value: '1000172664' },  
    { value: '1000172665' },  
    // ... 添加更多条形码数据  
]);  
function add(){
    barcodeDataArray.push({value: '1000172669'})
    console.log(barcodeDataArray);
    const lastIndex = barcodeDataArray.length - 1; // 获取最新添加的数据的索引  
    const svgId = 'barcode' + lastIndex; // 构造 SVG 的 ID  
    console.log(svgId,barcodeDataArray[lastIndex].value);
    nextTick(() => { 
    JsBarcode(`#${svgId}`, barcodeDataArray[lastIndex].value, {  // 使用最新的数据来渲染  
        format: "CODE128",  
        width: 4,  
        height: 200,  
        displayValue: false,  
        textPosition: "bottom",  
        background: "#fff",  
        lineColor: "#000",  
        fontSize: 14,  
        margin: 8  
    });  
    });
}

onMounted(() => {  
    // 使用 nextTick 确保 DOM 更新后再渲染条形码  
    nextTick(() => {  
        barcodeDataArray.forEach((barcodeData, index) => {  
            const svgId = 'barcode' + index;  
            console.log(svgId);
            JsBarcode(`#${svgId}`, barcodeData.value, {  
                format: "CODE128",  
                width: 4,  
                height: 200,  
                displayValue: true,  
                textPosition: "bottom",  
                background: "#fff",  
                lineColor: "#000",  
                fontSize: 14,  
                margin: 8  
            });  
        });  
    });  
});  
</script>  
  
<style scoped>  
/* 你的样式 */  
</style>
相关推荐
天天扭码14 分钟前
深入讲解Javascript中的常用数组操作函数
前端·javascript·面试
猿究院_xyz15 分钟前
跟着尚硅谷学vue-day5
前端·javascript·vue.js·前端框架·html
小杰love编程18 分钟前
Django 入门指南:构建强大的 Web 应用程序
前端·django·sqlite
~heart将心比心20 分钟前
chrome://inspect/#devices 调试 HTTP/1.1 404 Not Found 如何解决
前端·chrome
黄蘑菇26 分钟前
Vue 路由组件复用不触发生命周期钩子问题及解决方案
前端
嘻嘻嘻嘻嘻嘻ys27 分钟前
《Spring Boot 3 + Java 17:响应式云原生架构深度实践与范式革新》
前端·后端
Mike_jia29 分钟前
Glances:开源跨平台监控工具的终极指南
前端
前端太佬34 分钟前
从拧螺丝到造火箭:Git高阶玩家生存报告
前端·git·github
前端太佬34 分钟前
从青铜到塑料:Git逃难指南(附救命指令大全)
前端·git·github