链接生成二维码,二维码在线生成

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-背后的乐曲-in-center"> <div v-show="showShare" class="transition-box"> <el-button type="text" class="share_QRcode" @click="showQRcode">点击分享二维码</el-button> </div> </transition> </div> <el-dialog title="分享二维码" 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>   </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> 效果如图：