vue生成code128条码

VUE生成code128条码

1、先下载插件

npm i jsbarcode

2、生成条码

<template>
	<div style="width: 66%;margin: 12px auto 0">
		<!-- 这里的标签用img和svg都可以，个人觉着svg更清晰一点 -->
		<svg class="tiaoMa"></svg>
	</div>
	
<template/>

<script>
import JsBarcode from 'jsbarcode' // 在需要生成条码的页面引入插件
export default {
	data() {
		return {}
	},
	mounted() {
	    this.createdTiaoMa() // 要在mounted中调用此方法
	},
	methods: {
		createdTiaoMa() {
	      let barcode = document.getElementsByClassName('tiaoMa')
	      JsBarcode(barcode, 'hello world', {
	        // 生成条形码 注:this.$refs.barcode或者"#barcode"
	        format: "CODE128",// 选择要使用的条形码类型
	        width: 1,// 设置条之间的宽度
	        height: 25,//高度
	        displayValue: true,// 是否在条形码下方显示文字
	        text: "要显示的文字",// 覆盖显示的文本
	        fontOptions: "bold italic",//使文字加粗体或变斜体
	        font: "PingFangSC-Medium, PingFang SC",// 设置文本的字体
	        textAlign: "center",// 设置文本的水平对齐方式
	        textPosition: "bottom",// 设置文本的垂直位置
	        textMargin: 5,// 设置条形码和文本之间的间距
	        fontSize: 13,// 设置文本的大小
	        background: "transparent",// 设置条形码的背景
	        lineColor: "#000000",// 设置条和文本的颜色。
	        margin: 0, // 条码距四周的边距
	      });
	    }
	}
}
<script/>