在线预览
可自定义设置以下属性:
扫描后的文本或地址(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>