1.安装qrcodejs2：
npm install qrcodejs2 --save
yarn add qrcodejs2
2.初步封装组件：
/*** @file 生成二维码的组件* @author Walker* @date 2020-03-16*/
<template><div class="emqrcode"><button @click="showQRcode">点击分享二维码</button><div id="qrcode" ref="qrcode"></div></div>
</template><script>
import QRCode from "qrcodejs2";
export default {components: { QRCode },data() {return {link: "https://www.baidu.com/"};},methods: {/*** @description 生成二维码* @param {number} qWidth 宽度* @param {number} qHeight 高度* @param {string} qText 二维码内容（跳转连接）* @param {string} qRender 渲染方式（有两种方式 table和canvas，默认是canvas）*/qrcode(qWidth, qHeight, qText, qRender) {let qrcode = new QRCode("qrcode", {width: qWidth,height: qHeight,text: qText,render: qRender});},/*** @description 点击显示二维码*/showQRcode() {//二维码初始化 点击一次添加一个二维码this.$refs.qrcode.innerHTML = "";this.$nextTick(function() {this.qrcode(124, 124, this.link, "canvas");});}}
};
</script><style lang="less">
.emqrcode {width: 100%;background-color: #f00;
}
</style>
最后的样式：
3.结合ElementUI：
/*** @file 生成二维码的组件* @author Walker* @date 2020-03-16*/
<template><div class="emqrcode"><el-button type="primary" class="left_transition" @click="showShare = !showShare"><i class="el-icon-caret-left"></i></el-button><div class="share_box"><transition name="el-zoom-in-center"><div v-show="showShare" class="transition-box"><el-button type="text" class="share_QRcode" @click="showQRcode">点击分享二维码</el-button></div></transition></div><el-dialogtitle="分享二维码"custom-class="dialog_style":visible.sync="centerDialogVisible"width="40%"center@open="showQRcode"><div :append-to-body="false" id="qrcode" ref="qrcode"></div><span slot="footer" class="dialog-footer"><a class="linl_style">复制链接:{{link}}</a><!-- <el-button @click="centerDialogVisible = false">取 消</el-button> --><!-- <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button> --></span></el-dialog></div>
</template><script>
import QRCode from "qrcodejs2";
export default {components: { QRCode },data() {return {link:"https://www.baidu.com/",centerDialogVisible: false,showShare: false};},methods: {/*** @description 生成二维码* @param {number} qWidth 宽度px* @param {number} qHeight 高度px* @param {string} qText 二维码内容（跳转连接）* @param {string} qRender 渲染方式（有两种方式 table和canvas，默认是canvas）*/qrcode(qWidth, qHeight, qText, qRender) {let qrcode = new QRCode("qrcode", {width: qWidth,height: qHeight,text: qText,render: qRender});},/*** @description 遮罩打开的回调 点击显示二维码*/showQRcode() {//收回抽屉this.showShare = false;//调用函数生成二维码this.$nextTick(function() {//二维码初始化 点击一次添加一个二维码this.$refs.qrcode.innerHTML = "";this.qrcode(124, 124, this.link, "canvas");});//打开遮罩this.centerDialogVisible = true;}}
};
</script><style lang="less" scoped>
.left_transition {border-radius: 0;border: none;border-right: 1px solid #ccc;background-color: #4157ff;height: 36px;padding: 0 4px 0 3px;
}
.share_box {display: inline-block;height: 36px;border: none;vertical-align: top;
}
.emqrcode {position: fixed;right: 17px;top: 20px;width: auto;// background-color: #4157ff;z-index: 3000;color: #ffffff;
}
.share_QRcode {height: 36px;color: #ffffff;font-size: 10px !important;
}
.share_QRcode :hover {color: #eef;
}
.emqrcode :hover {// background-color: rgb(167, 206, 255);
}
.transition-box {background-color: #4157ff;text-align: center;color: #fff;padding: 0 2px;box-sizing: border-box;border: none;
}
.linl_style {color: #4157ff;font-size: 12px;
}
</style>
<style lang="less">
#qrcode {img {margin: 0 auto;}
}
</style>
效果如图：
