Vue3二维码（QRCode）

可自定义设置以下属性扫描后的文本或地址value类型string默认 undefined二维码的渲染类型type类型svg | canvas | image默认 svg二维码中图片的地址icon类型string默认 undefined二维码大小size类型number单位 px默认 160二维码中图片的大小iconSize类型number单位 px默认 40二维码颜色Value must be in hex format (十六进制颜色值)color类型string默认 #000二维码背景色Value must be in hex format (十六进制颜色值)bgColor类型string默认 #FFF是否有边框bordered类型boolean默认 true边框颜色borderColor类型string默认 rgba(5, 5, 5, 0.06)缩放因子每个black dots 占用多少像素scale类型number默认 8二维码纠错等级errorLevel类型L | M | Q | H默认 H由于博客自身限制无法放置效果图请使用在线预览查看效果在线预览纠错等级也叫纠错率就是指二维码可以被遮挡后还能正常扫描而这个能被遮挡的最大面积就是纠错率。通常情况下二维码分为 4 个纠错级别L级 可纠正约 7% 错误、M级 可纠正约 15% 错误、Q级 可纠正约 25% 错误、H级 可纠正约30% 错误。并不是所有位置都可以缺损像最明显的三个角上的方框直接影响初始定位。中间零散的部分是内容编码可以容忍缺损。当二维码的内容编码携带信息比较少的时候也就是链接比较短的时候设置不同的纠错等级生成的图片不会发生变化。安装插件pnpm i qrcode①创建二维码组件QRCode.vuescript setup langts import { ref, computed, watch } from vue import type { CSSProperties } from vue import QRCode from qrcode export interface Props { value?: string // 扫描后的文本或地址 type?: svg | canvas | image // 二维码的渲染类型 icon?: string // 二维码中图片的地址 size?: number // 二维码大小单位 px iconSize?: 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(definePropsProps(), { value: undefined, type: svg, icon: undefined, size: 160, iconSize: 40, color: #000, bgColor: #FFF, bordered: true, borderColor: rgba(5, 5, 5, 0.06), scale: 8, errorLevel: H }) const qrcodeSVGRef refHTMLElement | null(null) const qrcodeCanvasRef refHTMLElement | null(null) const qrcode refHTMLCanvasElement | string() const qrcodeStyle computed(() { const style: CSSProperties { width: ${props.size}px, height: ${props.size}px, backgroundColor: ${props.bgColor}, borderColor: ${props.borderColor} } return style }) const iconStyle computed(() { const style: CSSProperties { width: ${props.iconSize}px, height: ${props.iconSize}px, backgroundColor: ${props.bgColor} } return style }) const qrcodeOptions computed(() { return { quality: 1, // number 默认 0.92, 0 quality 1 仅在 type 为 image/jpeg 或 image/webp 时有效 margin: 0, // number 默认 4, 边距大小单位 px scale: props.scale, // number默认 4, 缩放因子A value of 1 means 1px per modules (black dots). color: { dark: props.color, // 像素点颜色 light: #00000000 // 背景色 }, errorCorrectionLevel: props.errorLevel } }) watch( () [props.value, props.type, qrcodeOptions.value], async () { if (props.value) { if (props.type svg) { qrcode.value await QRCode.toString(props.value, qrcodeOptions.value) qrcodeSVGRef.value!.innerHTML qrcode.value // !. 非空断言运算符 } else if (props.type canvas) { qrcode.value await QRCode.toCanvas(props.value, qrcodeOptions.value) qrcodeCanvasRef.value?.appendChild(qrcode.value) } else { qrcode.value await QRCode.toDataURL(props.value, qrcodeOptions.value) } } }, { immediate: true, deep: true, flush: post } ) defineExpose({ getQRCodeImage: () props.value QRCode.toDataURL(props.value, qrcodeOptions.value) }) /script template div classqrcode-wrap :class{ qrcode-bordered: bordered } :styleqrcodeStyle span v-iftype svg refqrcodeSVGRef classqrcode-svg/span span v-iftype canvas refqrcodeCanvasRef classqrcode-canvas/span img v-iftype image :srcqrcode as string classqrcode-image altQR Code / img v-ificon :srcicon :styleiconStyle classqrcode-icon altQR Code Icon / /div /template style langless scoped .qrcode-wrap { position: relative; display: inline-flex; justify-content: center; align-items: center; padding: 12px; border-radius: 8px; overflow: hidden; .qrcode-svg, .qrcode-canvas, .qrcode-image { width: 100%; height: 100%; } .qrcode-canvas { :deep(canvas) { max-width: 100%; max-height: 100%; } } .qrcode-icon { position: absolute; z-index: 1; right: 0; left: 0; top: 0; bottom: 0; margin: auto; pointer-events: none; } } .qrcode-bordered { border-width: 1px; border-style: solid; } /style②在要使用的页面引入其中引入使用了以下组件Vue3间距SpaceVue3按钮ButtonVue3分段控制器SegmentedVue3气泡卡片PopoverVue3颜色选择器ColorPickerVue3文本域Textareascript langts setup import QRCode from ./QRCode.vue import { ref } from vue import { MinusOutlined, PlusOutlined } from ant-design/icons-vue const qrcodeRef ref() const size ref(160) const value ref(hello world) const color ref(#FF6900) const bgColor ref(#00000030) const segmentedOptions [L, M, Q, H] const level ref(L) 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 } } const dowloadQRCode async () { const url await qrcodeRef.value.getQRCodeImage() const a document.createElement(a) a.download QRCode.png a.href url document.body.appendChild(a) a.click() document.body.removeChild(a) } /script template div h1{{ $route.name }} {{ $route.meta.title }}/h1 ul classm-list li a classu-file hrefhttps://www.npmjs.com/package/qrcode target_blankqrcode/a /li /ul h2 classmt30 mb10基本使用/h2 QRCode valuehttps://themusecatcher.blog.csdn.net / h2 classmt30 mb10无边框/h2 QRCode valuehttps://themusecatcher.blog.csdn.net :borderedfalse / h2 classmt30 mb10自定义尺寸/h2 Space vertical Space Button clickdecline :iconMinusOutlined small /Button Button clickincrease :iconPlusOutlined large /Button /Space QRCode :sizesize valuehttps://themusecatcher.blog.csdn.net / /Space h2 classmt30 mb10下载二维码/h2 Space vertical QRCode refqrcodeRef / Button typeprimary clickdowloadQRCodeDownlaod/Button /Space h2 classmt30 mb10气泡卡片二维码/h2 Popover :tooltip-style{ padding: 0 } template #content QRCode valuehttps://themusecatcher.blog.csdn.net :borderedfalse / /template img width100 height100 srchttps://themusecatcher.github.io/vue-amazing-ui/amazing-logo.svg / /Popover h2 classmt30 mb10带 Icon 的二维码/h2 QRCode error-levelH valuehttps://themusecatcher.blog.csdn.net iconhttps://themusecatcher.github.io/vue-amazing-ui/amazing-logo.svg / h2 classmt30 mb10自定义渲染类型/h2 h3 classmb10通过设置 type 自定义渲染结果可选 svg canvas image 三种类型/h3 Space QRCode valuehttps://themusecatcher.blog.csdn.net typesvg / QRCode valuehttps://themusecatcher.blog.csdn.net typecanvas / QRCode valuehttps://themusecatcher.blog.csdn.net typeimage / /Space h2 classmt30 mb10自定义样式/h2 h3 classmb10通过设置 color 和 bgColor 自定义二维码颜色和背景色/h3 Space QRCode valuehttps://themusecatcher.blog.csdn.net color#52c41a / QRCode valuehttps://themusecatcher.blog.csdn.net color#1677FF bg-color#f5f5f5 / QRCode valuehttps://themusecatcher.blog.csdn.net :colorcolor :bg-colorbgColor / Space vertical :width164 ColorPicker v-model:valuecolor :modes[hex] / ColorPicker v-model:valuebgColor :modes[hex] / /Space /Space h2 classmt30 mb10纠错等级/h2 h3 classmb10纠错等级也叫纠错率就是指二维码可以被遮挡后还能正常扫描而这个能被遮挡的最大面积就是纠错率。/h3 h3 classmb10 通常情况下二维码分为 4 个纠错级别L级 可纠正约 7% 错误、M级 可纠正约 15% 错误、Q级 可纠正约 25% 错误、H级 可纠正约 30% 错误。并不是所有位置都可以缺损像最明显的三个角上的方框直接影响初始定位。中间零散的部分是内容编码可以容忍缺损。当二维码的内容编码携带信息比较少的时候也就是链接比较短的时候设置不同的纠错等级生成的图片不会发生变化。 /h3 Space vertical QRCode valuehttps://themusecatcher.blog.csdn.net :error-levellevel / Segmented v-model:valuelevel :optionssegmentedOptions / /Space h2 classmt30 mb10自定义生成二维码/h2 Space aligncenter gaplarge QRCode :valuevalue / Textarea v-model:valuevalue :width200 allowClear / /Space /div /template