安裝依賴：
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>
