Vue3+qrcodejs怎么生成二维码并添加文字描述

发布时间：2022-08-03 17:29:27 作者：iii
来源：亿速云阅读：2507

Vue3 + qrcodejs 怎么生成二维码并添加文字描述

引言

在现代Web开发中，二维码（QR Code）已经成为一种非常常见的技术，广泛应用于各种场景，如支付、信息分享、身份验证等。Vue3 作为当前最流行的前端框架之一，结合 qrcodejs 这个强大的二维码生成库，可以轻松实现二维码的生成与展示。本文将详细介绍如何在 Vue3 项目中使用 qrcodejs 生成二维码，并为其添加文字描述。

Vue3 简介

Vue3 是 Vue.js 的最新版本，于2020年9月正式发布。Vue3 带来了许多新特性，如 Composition API、更好的 TypeScript 支持、性能优化等，使得开发者能够更高效地构建现代化的Web应用。

qrcodejs 简介

qrcodejs 是一个轻量级的 JavaScript 库，用于生成二维码。它支持多种二维码类型，并且可以自定义二维码的大小、颜色等属性。qrcodejs 的使用非常简单，只需几行代码即可生成二维码。

项目初始化

在开始之前，我们需要创建一个新的 Vue3 项目。如果你还没有安装 Vue CLI，可以通过以下命令进行安装：

npm install -g @vue/cli

然后，使用 Vue CLI 创建一个新的项目：

vue create vue3-qrcode-demo

在创建项目时，选择 Vue3 作为项目的默认版本。

安装依赖

接下来，我们需要安装 qrcodejs 库。在项目根目录下运行以下命令：

npm install qrcodejs2

安装完成后，我们可以在项目中引入 qrcodejs 库。

生成二维码

1. 创建二维码组件

首先，我们在 src/components 目录下创建一个新的组件 QRCode.vue：

<template>
  <div ref="qrcode"></div>
</template>

<script>
import QRCode from 'qrcodejs2';

export default {
  name: 'QRCode',
  props: {
    text: {
      type: String,
      required: true,
    },
    size: {
      type: Number,
      default: 200,
    },
  },
  mounted() {
    this.generateQRCode();
  },
  methods: {
    generateQRCode() {
      new QRCode(this.$refs.qrcode, {
        text: this.text,
        width: this.size,
        height: this.size,
      });
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需要进行调整 */
</style>

在这个组件中，我们通过 props 接收两个参数：text 和 size。text 是要生成二维码的文本内容，size 是二维码的大小。在 mounted 钩子中，我们调用 generateQRCode 方法来生成二维码。

2. 使用二维码组件

接下来，我们在 src/App.vue 中使用这个组件：

<template>
  <div id="app">
    <h1>Vue3 + qrcodejs 生成二维码</h1>
    <QRCode text="https://www.example.com" :size="200" />
  </div>
</template>

<script>
import QRCode from './components/QRCode.vue';

export default {
  name: 'App',
  components: {
    QRCode,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

在这个例子中，我们传递了 text 和 size 参数给 QRCode 组件，生成的二维码将显示在页面上。

添加文字描述

1. 修改二维码组件

为了在二维码下方添加文字描述，我们需要对 QRCode.vue 组件进行一些修改：

<template>
  <div class="qrcode-container">
    <div ref="qrcode"></div>
    <p v-if="description" class="description">{{ description }}</p>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';

export default {
  name: 'QRCode',
  props: {
    text: {
      type: String,
      required: true,
    },
    size: {
      type: Number,
      default: 200,
    },
    description: {
      type: String,
      default: '',
    },
  },
  mounted() {
    this.generateQRCode();
  },
  methods: {
    generateQRCode() {
      new QRCode(this.$refs.qrcode, {
        text: this.text,
        width: this.size,
        height: this.size,
      });
    },
  },
};
</script>

<style scoped>
.qrcode-container {
  display: inline-block;
  text-align: center;
}

.description {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}
</style>

在这个修改后的组件中，我们新增了一个 description 属性，用于接收二维码的文字描述。在模板中，我们使用 v-if 指令来判断是否显示描述文字。

2. 使用带描述的二维码组件

现在，我们可以在 App.vue 中使用带描述的二维码组件：

<template>
  <div id="app">
    <h1>Vue3 + qrcodejs 生成二维码</h1>
    <QRCode text="https://www.example.com" :size="200" description="扫描二维码访问示例网站" />
  </div>
</template>

<script>
import QRCode from './components/QRCode.vue';

export default {
  name: 'App',
  components: {
    QRCode,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

在这个例子中，我们传递了 description 参数给 QRCode 组件，生成的二维码下方将显示“扫描二维码访问示例网站”的文字描述。

优化与扩展

1. 自定义二维码颜色

qrcodejs 支持自定义二维码的颜色。我们可以通过修改 QRCode.vue 组件来实现这一功能：

<template>
  <div class="qrcode-container">
    <div ref="qrcode"></div>
    <p v-if="description" class="description">{{ description }}</p>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';

export default {
  name: 'QRCode',
  props: {
    text: {
      type: String,
      required: true,
    },
    size: {
      type: Number,
      default: 200,
    },
    description: {
      type: String,
      default: '',
    },
    colorDark: {
      type: String,
      default: '#000000',
    },
    colorLight: {
      type: String,
      default: '#ffffff',
    },
  },
  mounted() {
    this.generateQRCode();
  },
  methods: {
    generateQRCode() {
      new QRCode(this.$refs.qrcode, {
        text: this.text,
        width: this.size,
        height: this.size,
        colorDark: this.colorDark,
        colorLight: this.colorLight,
      });
    },
  },
};
</script>

<style scoped>
.qrcode-container {
  display: inline-block;
  text-align: center;
}

.description {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}
</style>

在这个修改后的组件中，我们新增了两个属性：colorDark 和 colorLight，分别用于设置二维码的深色和浅色部分。我们可以在 App.vue 中使用这些属性来自定义二维码的颜色：

<template>
  <div id="app">
    <h1>Vue3 + qrcodejs 生成二维码</h1>
    <QRCode text="https://www.example.com" :size="200" description="扫描二维码访问示例网站" colorDark="#ff0000" colorLight="#00ff00" />
  </div>
</template>

<script>
import QRCode from './components/QRCode.vue';

export default {
  name: 'App',
  components: {
    QRCode,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

在这个例子中，我们传递了 colorDark 和 colorLight 参数给 QRCode 组件，生成的二维码将使用红色和绿色作为深色和浅色部分。

2. 支持二维码下载

为了方便用户下载生成的二维码，我们可以为 QRCode.vue 组件添加一个下载按钮：

<template>
  <div class="qrcode-container">
    <div ref="qrcode"></div>
    <p v-if="description" class="description">{{ description }}</p>
    <button @click="downloadQRCode">下载二维码</button>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';

export default {
  name: 'QRCode',
  props: {
    text: {
      type: String,
      required: true,
    },
    size: {
      type: Number,
      default: 200,
    },
    description: {
      type: String,
      default: '',
    },
    colorDark: {
      type: String,
      default: '#000000',
    },
    colorLight: {
      type: String,
      default: '#ffffff',
    },
  },
  mounted() {
    this.generateQRCode();
  },
  methods: {
    generateQRCode() {
      new QRCode(this.$refs.qrcode, {
        text: this.text,
        width: this.size,
        height: this.size,
        colorDark: this.colorDark,
        colorLight: this.colorLight,
      });
    },
    downloadQRCode() {
      const canvas = this.$refs.qrcode.querySelector('canvas');
      const link = document.createElement('a');
      link.href = canvas.toDataURL('image/png');
      link.download = 'qrcode.png';
      link.click();
    },
  },
};
</script>

<style scoped>
.qrcode-container {
  display: inline-block;
  text-align: center;
}

.description {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}

button {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>

在这个修改后的组件中，我们新增了一个 downloadQRCode 方法，用于将二维码保存为 PNG 图片。我们在模板中添加了一个按钮，点击按钮时将触发 downloadQRCode 方法。

3. 支持二维码纠错级别

qrcodejs 支持设置二维码的纠错级别（Error Correction Level），以提高二维码的容错能力。我们可以通过修改 QRCode.vue 组件来实现这一功能：

<template>
  <div class="qrcode-container">
    <div ref="qrcode"></div>
    <p v-if="description" class="description">{{ description }}</p>
    <button @click="downloadQRCode">下载二维码</button>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';

export default {
  name: 'QRCode',
  props: {
    text: {
      type: String,
      required: true,
    },
    size: {
      type: Number,
      default: 200,
    },
    description: {
      type: String,
      default: '',
    },
    colorDark: {
      type: String,
      default: '#000000',
    },
    colorLight: {
      type: String,
      default: '#ffffff',
    },
    errorCorrectionLevel: {
      type: String,
      default: 'L',
      validator: (value) => ['L', 'M', 'Q', 'H'].includes(value),
    },
  },
  mounted() {
    this.generateQRCode();
  },
  methods: {
    generateQRCode() {
      new QRCode(this.$refs.qrcode, {
        text: this.text,
        width: this.size,
        height: this.size,
        colorDark: this.colorDark,
        colorLight: this.colorLight,
        correctLevel: QRCode.CorrectLevel[this.errorCorrectionLevel],
      });
    },
    downloadQRCode() {
      const canvas = this.$refs.qrcode.querySelector('canvas');
      const link = document.createElement('a');
      link.href = canvas.toDataURL('image/png');
      link.download = 'qrcode.png';
      link.click();
    },
  },
};
</script>

<style scoped>
.qrcode-container {
  display: inline-block;
  text-align: center;
}

.description {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}

button {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>

在这个修改后的组件中，我们新增了一个 errorCorrectionLevel 属性，用于设置二维码的纠错级别。我们可以在 App.vue 中使用这个属性来设置二维码的纠错级别：

<template>
  <div id="app">
    <h1>Vue3 + qrcodejs 生成二维码</h1>
    <QRCode text="https://www.example.com" :size="200" description="扫描二维码访问示例网站" colorDark="#ff0000" colorLight="#00ff00" errorCorrectionLevel="H" />
  </div>
</template>

<script>
import QRCode from './components/QRCode.vue';

export default {
  name: 'App',
  components: {
    QRCode,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

在这个例子中，我们传递了 errorCorrectionLevel 参数给 QRCode 组件，生成的二维码将使用最高级别的纠错能力。

总结

通过本文的介绍，我们学习了如何在 Vue3 项目中使用 qrcodejs 生成二维码，并为其添加文字描述。我们还探讨了如何自定义二维码的颜色、支持二维码下载以及设置二维码的纠错级别。这些功能可以帮助我们更好地满足实际项目中的需求。

希望本文对你有所帮助，祝你在 Vue3 开发中取得成功！