vue3生成二維碼和条形码

一。生成二维码

npm install --save qrcode.vue

<template>
  <qrcode-vue :value="value" :size="size" level="H" />
</template>
<script>
  import QrcodeVue from 'qrcode.vue'

  export default {
    data() {
      return {
        value: 'https://www.baidu.com',
        size: 300,
      }
    },
    components: {
      QrcodeVue,
    },
  }
</script>

效果图

二。生成条形码

npm install jsbarcode --save

<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>

效果图