概要
实现输入内容后点击回车或生成按钮,生成二维码,扫描后是我们在输入框的值.
在上述图片,第一个为输入内容,第二个图片就是显示的二维码.
整体架构流程
使用VsCode编译器
Vue2+qrcodejs2插件实现二维码生成操作
实现过程
创建vue
首先通过wepack创建vue项目:vue create 项目名
VsCode打开项目
打开终端
打开后，在终端中输入npm run serve，测试有无报错
下载qrcodejs2插件
这个vue插件的主要功能就是根据内容来生成对应的二维码。
npm install qrcodejs2 --save
注：不要忘了–save
导入和使用qrcodejs2
下载成功后应该是能用搜索或者package.json中能看到这个插件名
导入就在默认的HelloWorld.vue组件中的script进行操作
<script> import QRCode from 'qrcodejs2' export default { name: 'QRCodeGenerator', } </script>
上述代码的import QRCode from 'qrcodejs2',则为导入代码。
使用代码在下节进行测试代码展示与代码讲解。
代码展示与讲解
<template> <div class="qrcode"> <h1>生成二维码</h1> <label for="text">请输入要转换为二维码的内容：</label> <input type="text" id="text" v-model="text" @keyup.enter="generateQRCode"/> <button @click="generateQRCode">生成</button> <div ref="qrcode" style="margin:0 auto;"></div> </div> </template> <script> import QRCode from 'qrcodejs2' export default { name: 'QRCodeGenerator', data() { return { text: '', qrcode: null, } }, methods: { generateQRCode() { if (this.qrcode!=null) { this.qrcode.clear() // 清除原来的二维码 } this.qrcode = new QRCode(this.$refs.qrcode, { width: 256, height: 256, text: this.text }) } } } </script> <style> .qrcode input[type=text] { width: 20%; padding: 10px; font-size: 18px; margin-bottom: 20px; } .qrcode button { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } .qrcode button:hover { background-color: #45a049; } .qrcode div { margin-top: 20px; } </style>
在这个测试代码中，我们定义了一个名为 QRCodeGenerator 的组件，并在其中定义了一个 generateQRCode() 方法。在该方法中，我们利用 qrcodejs2 库生成二维码，并将其添加到组件的模板中。
注意，在组件挂载后，需要使用 this.$refs.qrcode 获取到
元素并将其传递给 QRCode 构造函数的第一个参数。这样才能正常地生成二维码。
此外，在每次生成新的二维码之前，要调用 clear() 方法清除原来的二维码，否则会导致新旧二维码叠加在一起。
最后，我为组件添加了一些CSS 样式。
