安装依赖：
npm install qrcode bwip-js
生成二维码代码如下：
<script setup>
import { ref } from 'vue';
import QRCode from 'qrcode';
const text = ref('');
const qrCodeUrl = ref("");
async function generateQRCode() {
try {
qrCodeUrl.value = await QRCode.toDataURL(text.value);
} catch (err) {
console.error(err);
}
}
</script>
<template>
<div>
<h2>二维码生成器</h2>
<input v-model="text" placeholder="输入文本生成二维码">
<button @click="generateQRCode">生成二维码</button>
<div v-if="qrCodeUrl">
<img :src="qrCodeUrl" alt="二维码"/>
</div>
</div>
</template>
<style scoped>
</style>
生成条形码如下：
<script setup>
import bwipjs from 'bwip-js'
import { ref } from 'vue'
const text = ref('')
const barcodeCanvasRef = ref("")
function generateBarcode() {
bwipjs.toCanvas(barcodeCanvasRef.value, {
bcid: 'code128', // 条形码类型
text: text.value,
scale: 3, // 缩放比例
height: 10, // 条形码高度
includetext: true, // 是否包括文本
textxalign: 'center' // 文本对齐方式
})
}
</script>
<template>
<div>
<h2>条形码生成器</h2>
<input v-model="text" placeholder="输入文本生成条形码" aria-label="输入文本" />
<button @click="generateBarcode" aria-label="生成条形码">生成条形码</button>
<canvas ref="barcodeCanvasRef"></canvas>
</div>
</template>
<style scoped>
</style>
