Vue3二维码（QRCode）

文章列表

Vue3二维码（QRCode）

可自定义设置以下属性：

扫描后的文本或地址（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><QRCodevalue="https://blog.csdn.net/Dandrose"errorLevel="M"/><h2 class="mt30 mb10">自定义二维码颜色和背景色 (color: '#1677FF', backgroundColor: 'rgba(0,0,0,0.25)')</h2><QRCodevalue="https://blog.csdn.net/Dandrose"color="#1677FF"backgroundColor="f5f5f5"/></div>
</template>
<style lang="less" scoped>
</style>

Vue3二维码（QRCode）

相关问题

公告