20220815今天学了干了什么？努力过好今天
看课
给了两个bug
js的课，那今天开这个课，就把它学明白。
这个知识点是什么呢？把它弄明白。
今天我能学什么知识？
好好努力，顺其自然，自然社交，尊重别人，话说三分，得之我幸，失之我命。。。。努力过好今天，今天我有什么要学的？
二维码是怎么做的呢？
百度：vue-qr二维码插件安装
安装命令npm install vue-qr --save
引入插件组件 import vueQr from “vue-qr”
在结构中写上标签。
打工20年买房30年买房。
过了6点不消化了。
没工作的时候，你做了什么？
认真对待学习对待每件事情。
转 Vue二维码插件 落下香樟树 于 2020-10-26 17:25:37 发布 1237 收藏 1 分类专栏： vue插件 版权
vue插件
专栏收录该内容
3 篇文章0 订阅
订阅专栏
二维码生成插件
一、vue-qr二维码插件（Image版）
1. 安装
// 使用node的npm安装
npm install vue-qr --save
// 使用yarn安装
yarn add vue-qr
2. 引用项目
<VueQr
draggable="false"
:correctLevel="3"
:dotScale="1"
:logoSrc="logo"
:margin="15"
:size="256"
:text="codeUrl"
/>
import VueQr from "vue-qr";
new Vue({
components: {VueQr}
});
3. 常用属性：
draggable：禁止鼠标图片拖拽；
correctLevel：识别程度容错率，分为1、2、3，值越容错率越高；
bgSrc：二维码背景图像地址链接；
gifBgSrc：二维码动态背景图像地址链接；
dotScale：构成二维码图像的点的大小；
logoSrc：二维码中心的logo图像；
logoScale：二维码logo的大小；
logoMargin：logo外边距留白；
margin：二维码边距，默认值20px；
size：二维码的宽度和高度；
text：二维码生成的内容；
colorDark：二维码实点的颜色，需要配合colorLight一起使用才有效；
colorLight：二维码中空白的颜色，需要配合colorDark一起使用才有效；
注：这些是常用的属性值，若想更进一步了解，请前去 NPM官网 查阅。
二、qrcode二维码插件（Canvas版）
1. 安装
npm install --save qrcode
// or
npm install -g qrcode
// or
yarn add qrcode
2. 引用
<canvas id="canvas"></canvas>
引用方法：
var QRCode = require('qrcode');
QRCode.toDataURL('I am a pony!', function (err, url) {
console.log(url)
});
// or
// errorCorrectionLevel：要绘制二维码的容错率，属性见下表
QRCode.toCanvas('url', { errorCorrectionLevel: 'H' }, function (err, canvas) {
if (err) throw err;
// 渲染生成的二维码
var container = document.getElementById('canvas');
container.appendChild(canvas);
});
容错率属性值：
Level Error resistance
L (Low) ~7%
M (Medium) ~15%
Q (Quartile) ~25%
H (High) ~30%
三、qrcode.vue二维码插件
1. 安装
npm install --save qrcode.vue
// or
yarn add qrcode.vue
2. 引用
<qrcode-vue :value="value" :size="size" level="H"></qrcode-vue>
使用方法：
import QrcodeVue from 'qrcode.vue';
export default {
data() {
return {
// 绑定属性值
value: 'url', // 生成二维码文本链接
size: 300 // 二维码宽高大小
}
},
components: {
QrcodeVue
}
};
插件属性值：
属性 默认值 简介
value " " 转换二维码的文本链接
className " " 二维码类名
size 100 二维码默认大小
level L 容错级别（提升识别率）
background #fff 二维码背景颜色
foreground #000 二维码颜色
注：对比三个二维码生成插件，各有各的优点和不足之处；相比之下，插件 vue-qr属性值较多一些，可设置的项也比较多，同时还可以生成 logo；canvas版本的生成的二维码是 canvas，其余两个生成的二维码是 image图片，为了减少二维码图片的拖拽，故在模板标签上添加 draggable属性，其作用是为了防止鼠标拖拽图片。
————————————————
版权声明：本文为CSDN博主「落下香樟树」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sk_21/article/details/109294009
