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：

②在要使用的页面引入：