方法一：qrcodejs2插件
安装依赖：npm install --save qrcodejs2
html代码：
<div id="qrcode" ref="qrCodeDiv"></div>
<button @click="bindQRCode">点击生成二维码</button>
js代码：
import QRCode from "qrcodejs2";
bindQRCode() {
document.getElementById("qrcode").innerHTML = "";//为了防止生成多张，生成前先清空原先的；
new QRCode(this.$refs.qrCodeDiv, {
text: "我是一个二维码", //二维码的内容
width: 150, //二维码的宽度
height: 150, //二维码的高度
colorDark: "#333333", //二维码颜色
colorLight: "#ffffff", //二维码背景色
correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
});
}
效果图如下：
方法2：vue-qr 插件
安装依赖：npm install vue-qr --save
html代码(vue组件)：
<vue-qr
:size="300" // 宽高
:logoSrc="icode" // 图片地址
:logoScale='0.3' // 图片缩放比例
:text="codeValue" // 扫码后查看到的文本
:margin='2' // 左边距2px
></vue-qr>
js代码：文章来源：https://www.toymoban.com/news/detail-594888.html
import vueQr from "vue-qr";
data() {
return {
codeValue: '我是二维码',
icode: require("../../assets/image/login/bg2.jpg"),
};
},
components: {
vueQr,
}
效果图如下：
文章来源地址https://www.toymoban.com/news/detail-594888.html
到了这里，关于前端制作二维码的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
