使用 Vue 生成二维码和条形码

一、环境准备

首先，请确保已经安装了 Node.js 和 Vue CLI。如果还未安装，可以通过以下命令进行安装：

npm install -g @vue/cli

接下来创建一个新的 Vue 项目：

vue create barcode-qrcode-demo

进入项目目录：

cd barcode-qrcode-demo

二、安装依赖

将使用 qrcode 库来生成二维码，使用 bwip-js 来生成条形码。可以通过以下命令安装它们：

npm install qrcode bwip-js

三、生成二维码

创建二维码组件

在 src/components 目录下创建 QRCodeGenerator.vue 文件，并添加以下代码：

<template>
  <div>
    <h2>二维码生成器</h2>
    <input v-model="text" placeholder="输入文本生成二维码">
    <button @click="generateQRCode">生成二维码</button>
    <div v-if="qrCodeUrl">
      <img :src="qrCodeUrl" alt="二维码"/>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  data() {
    return {
      text: '',
      qrCodeUrl: ''
    }
  },
  methods: {
    async generateQRCode() {
      try {
        this.qrCodeUrl = await QRCode.toDataURL(this.text);
      } catch (err) {
        console.error(err)
      }
    }
  }
}
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>

在 App.vue 中使用二维码组件

打开 src/App.vue 文件，导入并使用 QRCodeGenerator 组件：

<template>
  <div id="app">
    <QRCodeGenerator />
  </div>
</template>

<script>
import QRCodeGenerator from './components/QRCodeGenerator.vue'

export default {
  components: {
    QRCodeGenerator
  }
}
</script>

<style>
/* 可根据需要添加样式 */
</style>

四、生成条形码

创建条形码组件

在 src/components 目录下创建 BarcodeGenerator.vue 文件，并添加以下代码：

<template>
  <div>
    <h2>条形码生成器</h2>
    <input v-model="text" placeholder="输入文本生成条形码">
    <button @click="generateBarcode">生成条形码</button>
    <canvas ref="barcodeCanvas"></canvas>
  </div>
</template>

<script>
import bwipjs from 'bwip-js'

export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    generateBarcode() {
      bwipjs.toCanvas(this.$refs.barcodeCanvas, {
        bcid: 'code128', // 条形码类型
        text: this.text,
        scale: 3, // 缩放比例
        height: 10, // 条形码高度
        includetext: true, // 是否包括文本
        textxalign: 'center' // 文本对齐方式
      })
    }
  }
}
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>

在 App.vue 中使用条形码组件

同样，在 src/App.vue 中导入并使用 BarcodeGenerator 组件：

<template>
  <div id="app">
    <QRCodeGenerator />
    <BarcodeGenerator />
  </div>
</template>

<script>
import QRCodeGenerator from './components/QRCodeGenerator.vue'
import BarcodeGenerator from './components/BarcodeGenerator.vue'

export default {
  components: {
    QRCodeGenerator,
    BarcodeGenerator
  }
}
</script>

<style>
/* 可根据需要添加样式 */
</style>

通过这些步骤，您可以轻松地在 Vue 项目中生成二维码和条形码。根据需要，您可以对样式进行进一步的自定义和优化。