方法一: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代码:
import vueQr from "vue-qr";
data() {
return {
codeValue: '我是二维码',
icode: require("../../assets/image/login/bg2.jpg"),
};
},
components: {
vueQr,
}
效果图如下:
今天的文章前端制作二维码的方法有哪些_免费的二维码生成网页「建议收藏」分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/77497.html