vue 使用jsbarcode生成条形码

生成条形码样式如图所示↓

• 安装jsbarcode依赖包

npm install jsbarcode --save

• 在需要生成条形码页面引入

import JsBarcode from 'jsbarcode'

 

• 在template中定义标签

<template>
  <img id="barcode" />
</template>

• 调用并生成二维码,可以写在mounted中或者方法中

JsBarcode('#barcode', 'Hello World!!',{
  format: "CODE128",//选择要使用的条形码类型
  width:2,//设置条之间的宽度
  height:40,//高度
  displayValue:true,//是否在条形码下方显示文字
  textAlign:"center",  //文字所在位置,默认中间
  text:'Hello World!!',//覆盖显示的文本
  lineColor:"#000",//设置条和文本的颜色。
})