可自定义设置以下属性：

• 扫描后的文本或地址（value），类型：string，默认 ''

• 二维码大小（size），类型：number，单位px，默认 160

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

• 二维码背景色，Value must be in hex format (十六进制颜色值)（backgroundColor），类型：string，默认'#FFF'

• 是否有边框（bordered），类型：boolean，默认 true

• 每个black dots多少像素（scale），类型：number，默认 8

• 二维码纠错等级（errorLevel），类型：string，默认 'H'

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

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

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

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

效果如下图：

安装插件：yarn add @vueuse/integrations

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

<script setup lang="ts">
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 // 二维码大小
  color?: string // 二维码颜色，Value must be in hex format (十六进制颜色值)
  backgroundColor?: string // 二维码背景色，Value must be in hex format (十六进制颜色值)
  bordered?: boolean // 是否有边框
  scale?: number // 每个black dots多少像素
  /*
    纠错等级也叫纠错率，就是指二维码可以被遮挡后还能正常扫描，而这个能被遮挡的最大面积就是纠错率。
    通常情况下二维码分为 4 个纠错级别：L级 可纠正约 7% 错误、M级 可纠正约 15% 错误、Q级 可纠正约 25% 错误、H级 可纠正约30% 错误。
    并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。
    当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。
  */
  errorLevel?: string // 二维码纠错等级
}
const props = withDefaults(defineProps<Props>(), {
  value: '',
  size: 160,
  color: '#000',
  backgroundColor: '#FFF',
  bordered: true,
  scale: 8,
  errorLevel: 'H' // 可选 L M Q H
})

// `qrcode` will be a ref of data URL
const qrcode = 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.backgroundColor // 背景色
  }
})
</script>
<template>
  <div class="m-qrcode" :class="{'bordered': bordered}" :style="`width: ${size}px; height: ${size}px;`">
    <img :src="qrcode" class="u-qrcode" alt="QRCode" />
  </div>
</template>
<style lang="less" scoped>
.m-qrcode {
  box-sizing: border-box;
  display: inline-block;
  border-radius: 8px;
  overflow: hidden;
  .u-qrcode {
    width: 100%;
    height: 100%;
  }
}
.bordered {
  border: 1px solid rgba(5, 5, 5, 0.06);
}
</style>

②在要使用的页面引入：

<script setup lang="ts">
import QRCode from './QRCode.vue'
</script>
<template>
  <div>
  <h2 class="mb10">QRCode 二维码基本使用</h2>
  <QRCode value="https://blog.csdn.net/Dandrose"/>
  <h2 class="mt30 mb10">无边框，纠错等级M (bordered: false & errorLevel: M)</h2>
  <QRCode
    value="https://blog.csdn.net/Dandrose"
    errorLevel="M"/>
  <h2 class="mt30 mb10">自定义二维码颜色和背景色 (color: '#1677FF', backgroundColor: 'rgba(0,0,0,0.25)')</h2>
  <QRCode
    value="https://blog.csdn.net/Dandrose"
    color="#1677FF"
    backgroundColor="f5f5f5"/>
  </div>
</template>
<style lang="less" scoped>
</style>