利用 Vue3 生成二维码和条形码
目录媒介
一、前期准备
1.1. 利用Vite创建工程化项目
1.2 安装所需的依赖
二、环境检查
三、生成二维码
3.1 创建二维码组件
3.2 在App.vue中利用二维码组件
四、生成条形码
4.1 创建条形码组件
4.2.在App.vue中利用条形码组件
五、启动测试与效果演示
5.1 启动demo
5.2 二维码演示
5.3 条形码演示
https://i-blog.csdnimg.cn/direct/78b191efefc34835a49a593608e412de.png
媒介
在我刚打仗CSDN时,便写下了第一篇利用python库生成二维码的博文,但是随着学习的知识越来越多,实现同一个功能,但可以通过差异的方式得以实现,本篇是通过Vue3和Vue的一些组件库从而实现的一个小demo
https://i-blog.csdnimg.cn/direct/d9647ba1af764d25aa646186376e5465.png
一、前期准备
1.1. 利用Vite创建工程化项目
这里可以在vscode或是其他的IDE,或是直接找一个符合的目录,然后在cmd中即可
npm create vite@latest https://i-blog.csdnimg.cn/direct/83c8a605135f441e9793a8267c8d37dc.png
输入要创建的vue项目名,然后回车,选择Vue,然后回车,这里我的项目名是demo0-happy
https://i-blog.csdnimg.cn/direct/87b596c85af74374a36f232f0625e8ef.png
选择自己想用的,不知道直接选js
https://i-blog.csdnimg.cn/direct/a6fd48ac2fb14cb495d7101b253bac93.png
进入文件所处的目录
cd demo0-happy 1.2 安装所需的依赖
起首输入npm i 也就是(npm install的缩写)
https://i-blog.csdnimg.cn/direct/a1c5cd74b7544d759b998f24969318c2.png
将利用qrcode库来生成二维码，利用bwip-js来生成条形码。可以通过以下下令安装它们：
npm install qrcode bwip-js 二、环境检查
起首，请确保已经安装了Node.js和Vue CLI。如果还未安装，可以通过以下下令举行安装：
npm install @vue/cli 三、生成二维码
3.1 创建二维码组件
在src/components目录下创建QRCodeGenerator.vue文件，并添加以下代码：
<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>
3.2 在App.vue中利用二维码组件
打开src/App.vue文件，导入并利用QRCodeGenerator组件：
<script setup>
import QRCodeGenerator from './components/QRCodeGenerator.vue'
</script>
<template>
<div>
<QRCodeGenerator></QRCodeGenerator>
<hr>
</div>
</template>
<style scoped>
</style> 四、生成条形码
4.1 创建条形码组件
在src/components目录下创建BarcodeGenerator.vue文件，并添加以下代码：
<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> 4.2.在App.vue中利用条形码组件
同样，在src/App.vue中导入并利用BarcodeGenerator组件,此时会将之前的二维码的一并导入：
<script setup>
import QRCodeGenerator from './components/QRCodeGenerator.vue'
import BarcodeGenerator from './components/BarcodeGenerator.vue'
</script>
<template>
<div>
<QRCodeGenerator></QRCodeGenerator>
<hr>
<BarcodeGenerator></BarcodeGenerator>
</div>
</template>
<style scoped>
</style> 五、启动测试与效果演示
5.1 启动demo
切换到项目的目录下,在项目的目录下启动
npm run dev 将出现的url链接打开,便会出现下面的界面
https://i-blog.csdnimg.cn/direct/d2694c60ba9a4b0983ad482c5ea0f742.png
https://i-blog.csdnimg.cn/direct/ece35693832147fa9e8bde9ef63c6fd4.png
5.2 二维码演示
输入想要生成二维码的笔墨和信息,或是链接,然后点击生成二维码按钮即可,这里利用了utools的二维码识别截图工具(QRscan)识别如下
https://i-blog.csdnimg.cn/direct/8a3107a87e704240888d07fc3324e485.png
https://i-blog.csdnimg.cn/direct/9e76e149f363466cb1f646b295f00085.png
5.3 条形码演示
这里操作的方式和上面是一样的
https://i-blog.csdnimg.cn/direct/03f79d891788409384102b4c8a689318.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]