vue3.0+barcode生成条形码(setup语法糖写法)

1、安装vue3-barcode

npm install vue3-barcode

2、在vue页面script标签下引入vue3-barcode

<script setup>
import { ref } from 'vue'
//引入
import Vue3Barcode from 'vue3-barcode'
//定义要生成条形码的值
const barcodeValue = ref('ETC785216')
</script>

3、直接在vue页面使用

<Vue3Barcode :value='barcodeValue' width='3' height='80' format='auto'></Vue3Barcode >
/**
1、value是要生成条形码的数据。
2、width是条形码的宽度，不是整个图片的宽度。
3、height是整个图片的高度。
4、format是条形码的格式。
5、其它的配置项可以去百度查找文档。
**/

4、barcode是由JsBarcode封装的一个简易的条形码生成文件。只能生成一个条形码，要是循环一个数组的数据，就不能满足。可以使用在vue中使用JsBarcode生成多个条形码。