Vue3二维码(QRCode)

简介: 这是一个可高度定制的二维码生成组件,支持在线预览。提供了丰富的属性设置,包括扫描文本、二维码大小、颜色、背景色、边框、边框颜色、像素比例及纠错等级等。安装简单,通过 `pnpm` 引入插件,创建 `QRCode.vue` 组件即可使用。适用于多种应用场景,如生成不同样式的二维码、动态调整大小和内容等。

在线预览

可自定义设置以下属性:

  • 扫描后的文本或地址(value),类型:string,默认 undefined

  • 二维码大小(size),类型:number,单位 px,默认 160

  • 二维码颜色,Value must be in hex format (十六进制颜色值)(color),类型:string,默认 '#000'

  • 二维码背景色,Value must be in hex format (十六进制颜色值)(bgColor),类型:string,默认 '#FFF'

  • 是否有边框(bordered),类型:boolean,默认 true

  • 边框颜色(borderColor),类型:string,默认 '#0505050f'

  • 每个black dots多少像素(scale),类型:number,默认 8

  • 二维码纠错等级(errorLevel),类型:'L' | 'M' | 'Q' | 'H',默认 'H'

纠错等级也叫纠错率,就是指二维码可以被遮挡后还能正常扫描,而这个能被遮挡的最大面积就是纠错率。

通常情况下二维码分为 4 个纠错级别:L级 可纠正约 7% 错误、M级 可纠正约 15% 错误、Q级 可纠正约 25% 错误、H级 可纠正约30% 错误。

并不是所有位置都可以缺损,像最明显的三个角上的方框,直接影响初始定位。中间零散的部分是内容编码,可以容忍缺损。

当二维码的内容编码携带信息比较少的时候,也就是链接比较短的时候,设置不同的纠错等级,生成的图片不会发生变化。

安装插件:pnpm i qrcode @vueuse/integrations

①创建二维码组件QRCode.vue:

<script setup lang="ts">
import { computed } from 'vue'
import { useQRCode } from '@vueuse/integrations/useQRCode'
/*
  参考文档:https://vueuse.org/integrations/useQRCode/
  https://www.npmjs.com/package/qrcode#qr-code-options
*/
interface Props {
  value?: string // 扫描后的文本或地址
  size?: number // 二维码大小,单位 px
  color?: string // 二维码颜色,Value must be in hex format (十六进制颜色值)
  bgColor?: string // 二维码背景色,Value must be in hex format (十六进制颜色值)
  bordered?: boolean // 是否有边框
  borderColor?: string // 边框颜色
  scale?: number // 每个 black dots 多少像素
  /*
    纠错等级也叫纠错率,就是指二维码可以被遮挡后还能正常扫描,而这个能被遮挡的最大面积就是纠错率。
    通常情况下二维码分为 4 个纠错级别:L级 可纠正约 7% 错误、M级 可纠正约 15% 错误、Q级 可纠正约 25% 错误、H级 可纠正约30% 错误。
    并不是所有位置都可以缺损,像最明显的三个角上的方框,直接影响初始定位。中间零散的部分是内容编码,可以容忍缺损。
    当二维码的内容编码携带信息比较少的时候,也就是链接比较短的时候,设置不同的纠错等级,生成的图片不会发生变化。
  */
  errorLevel?: 'L' | 'M' | 'Q' | 'H' // 二维码纠错等级
}
const props = withDefaults(defineProps<Props>(), {
  value: undefined,
  size: 160,
  color: '#000',
  bgColor: '#FFF',
  bordered: true,
  borderColor: '#0505050f',
  scale: 8,
  errorLevel: 'H' // 可选 L M Q H
})
const qrcode = computed(() => {
  // `qrcode` will be a ref of data URL
  return useQRCode(props.value || '', {
    errorCorrectionLevel: props.errorLevel,
    type: 'image/png',
    quality: 1,
    margin: 3,
    scale: props.scale, // 8px per modules(black dots)
    color: {
      dark: props.color, // 像素点颜色
      light: props.bgColor // 背景色
    }
  })
})
</script>
<template>
  <div
    class="m-qrcode"
    :class="{ 'qrcode-bordered': bordered }"
    :style="`width: ${size}px; height: ${size}px; border-color: ${borderColor};`"
  >
    <img :src="qrcode.value" class="qrcode-image" alt="QRCode" />
  </div>
</template>
<style lang="less" scoped>
.m-qrcode {
  display: inline-block;
  border-radius: 8px;
  overflow: hidden;
  .qrcode-image {
    width: 100%;
    height: 100%;
  }
}
.qrcode-bordered {
  border-width: 1px;
  border-style: solid;
}
</style>

②在要使用的页面引入:

<script setup lang="ts">
import QRCode from './QRCode.vue'
import { ref } from 'vue'
const size = ref(160)
const value = ref('hello world')
const decline = () => {
  size.value = size.value - 10
  if (size.value < 48) {
    size.value = 48
  }
}
const increase = () => {
  size.value = size.value + 10
  if (size.value > 300) {
    size.value = 300
  }
}
</script>
<template>
  <div>
    <h1>{
  { $route.name }} {
  { $route.meta.title }}</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <QRCode value="https://blog.csdn.net/Dandrose" />
    <h2 class="mt30 mb10">无边框</h2>
    <QRCode value="https://blog.csdn.net/Dandrose" :bordered="false" />
    <h2 class="mt30 mb10">纠错等级</h2>
    <h3 class="mb10">纠错等级也叫纠错率,就是指二维码可以被遮挡后还能正常扫描,而这个能被遮挡的最大面积就是纠错率。</h3>
    <h3 class="mb10">
      通常情况下二维码分为 4 个纠错级别:L级 可纠正约 7% 错误、M级 可纠正约 15% 错误、Q级 可纠正约 25% 错误、H级
      可纠正约30%
      错误。并不是所有位置都可以缺损,像最明显的三个角上的方框,直接影响初始定位。中间零散的部分是内容编码,可以容忍缺损。当二维码的内容编码携带信息比较少的时候,也就是链接比较短的时候,设置不同的纠错等级,生成的图片不会发生变化。
    </h3>
    <QRCode value="https://blog.csdn.net/Dandrose" error-level="M" />
    <h2 class="mt30 mb10">自定义尺寸</h2>
    <Space>
      <Button @click="decline">
        <svg
          focusable="false"
          data-icon="minus"
          width="1em"
          height="1em"
          fill="#000000E0"
          aria-hidden="true"
          viewBox="64 64 896 896"
        >
          <path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
        </svg>
        <span style="margin-inline-start: 8px">small</span>
      </Button>
      <Button @click="increase">
        <svg
          focusable="false"
          data-icon="plus"
          width="1em"
          height="1em"
          fill="#000000E0"
          aria-hidden="true"
          viewBox="64 64 896 896"
        >
          <path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path>
          <path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path>
        </svg>
        <span style="margin-inline-start: 8px">large</span>
      </Button>
    </Space>
    <br />
    <br />
    <QRCode :size="size" value="https://blog.csdn.net/Dandrose" />
    <h2 class="mt30 mb10">自定义样式</h2>
    <h3 class="mb10">自定义二维码颜色和背景色</h3>
    <Space>
      <QRCode value="https://blog.csdn.net/Dandrose" color="#52c41a" />
      <QRCode value="https://blog.csdn.net/Dandrose" color="#1677FF" bg-color="#f5f5f5" />
    </Space>
    <h2 class="mt30 mb10">自定义生成二维码</h2>
    <Space align="center" gap="large">
      <QRCode :value="value" />
      <Textarea v-model:value="value" :width="180" allowClear />
    </Space>
  </div>
</template>
相关文章
|
9天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
6天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
19 7
|
7天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
25 3
|
6天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
24 1
|
6天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
25 1
|
8天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
9天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
12天前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
25 2
|
12天前
|
API
vue3知识点:reactive函数
vue3知识点:reactive函数
22 1
|
12天前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
21 0