二维码
需要用到依赖：qrcodejs2-fix
安装依赖
npm i qrcodejs2-fix代码部分
<template><div><div id="codes" ref="codes"></div></div>
</template><script setup>
import { ref, onMounted } from "vue";
import QRCode from "qrcodejs2-fix";const codes = ref(null)onMounted(() => {// 获取二维码容器元素var qrcodeContainer = document.getElementById("codes");// 清除二维码容器内的内容qrcodeContainer.innerHTML = "";new QRCode(codes.value, {text: '这是你需要生成的内容', //内容width: 170,height: 170,colorDark: "#000", //二维码颜色colorLight: "#ffffff", //背景颜色});
});
</script>条形码
需要用到依赖：jsbarcode
这里附上地址：GitCode - 全球开发者的开源社区,开源代码托管平台
安装依赖
npm i jsbarcode代码部分
这里需要注意的地方是：需要先创建一个canvas（或者图片）
<template><div><svg id="barcode"></svg></div>
</template><script setup>
import { ref, onMounted } from "vue";
import JsBarcode from "jsbarcode";onMounted(() => {// 使用 JsBarcode 生成条形码JsBarcode("#barcode", '这是你需要的内容，一般是一串数字', {format: "CODE128", // 你可以选择不同的条形码格式，如 UPC, EAN, CODE128 等 EAN13lineColor: "#000",width: 2,height: 80,displayValue: false,});
});
</script>条形码有各种各样的格式，具体格式参考我上面的文档地址，这里就不一一赘述
