vue生成条形码

最新推荐文章于 2024-08-09 13:40:51 发布

莫物

最新推荐文章于 2024-08-09 13:40:51 发布

阅读量503

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45618937/article/details/127801816

版权

本文档介绍了如何在Vue.js项目中安装并使用JsBarcode库来生成条形码。首先通过npm安装vue-barcode，然后在需要的组件中导入并注册JsBarcode。在mounted钩子中实例化JsBarcode，设置内容、格式、尺寸等选项。提供了相关参考文档链接，帮助开发者更好地理解和使用该库。

摘要由CSDN通过智能技术生成

1、安装

npm install vue-barcode --save

2、在需要的页面引入注册和使用

<template>
  <div>
	<!--使用->
    <img id="barcode"/>
    <!--<svg id="barcode"></svg>->
  </div>
</template>

<script>
//映入注册
import JsBarcode from 'jsbarcode'
export default {
    name: 'JsBarcode',
    props: {
        content: String,
    },
    mounted(){
      if(this.content != ""){
        //实例化
        JsBarcode("#barcode", this.content, {
            format: "CODE39",  //条形码的格式
            // lineColor: "#0aa",  //线条颜色
            width:1, //线宽
            height:40,  //条码高度
            // displayValue: false //是否显示文字信息
        });
      }  
    },
}
</script>