Vue使用JsBarcode生成条形码

一、简介

非常实用的一个工具，几行代码帮助我们生成条形码。

官网：https://lindell.me/JsBarcode/

二、使用

1、安装

npm install jsbarcode --save

2、引入项目中

import JsBarcode from "jsbarcode"

3、使用

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

三、代码总览

所有内容写在同一个文件中

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

<script>
	import JsBarcode from "jsbarcode"

	export default {
		name: "App",
		components: {},
    mounted() {
      JsBarcode("#barcode", "1234567890", {
				format: "CODE128", //选择要使用的条形码类型
				width: 2, //设置条之间的宽度
				height: 40, //高度
				displayValue: true, //是否在条形码下方显示文字
				textAlign: "center", //文字所在位置,默认中间
				text: "hello", //条形码下面显示的文本内容
				lineColor: "#000", //设置条和文本的颜色。
			})
    },
	}
</script>

<style></style>

四、效果展示