1,终端输入 npm install qrcodejs2 --save 安装qrcodejs2
npm install qrcodejs2 --save
2,页面引入使用终端安装好的qrcodejs2
<template>
<div>
<!-- 二维码生成 -->
<div @click="qrCodeGeneration()"></div>
<!-- 二维码弹框 -->
<el-dialog title="二维码" :visible.sync="qrCodeVisible" width="27%" >
<!-- 二维码图片 -->
<div id="qrCodeUrl"></div>
<!-- 取消按钮 -->
<span slot="footer" class="dialog-footer">
<el-button @click="qrCodeVisible = false">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// 引入刚下载的qrcodejs2
import QRCode from 'qrcodejs2'
export default{
name: 'qrCode',
data(){
return {
qrCodeVisible: false // 二维码弹框
}
},
methos:{
// 二维码生成
qrCodeGeneration() {
// 二维码弹框显示
this.qrCodeVisible = true;
// 生成二维码
this.$nextTick(function () {
document.getElementById("qrCodeUrl").innerHTML = "";
let qrCodeUrl= new QRCode("qrCodeUrl", {
width: 200,
height: 200,
text: "生成二维码的内容",
colorDark: "#409EFF",
colorLight: "#fff"
});
});
}
}
}
</script>
<style scoped>
/deep/ #qrCodeUrl > img {
margin: 0 auto;
}
</style>