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>

效果如圖：

總結

以上是生活随笔為你收集整理的qrcodejs2--Vue生成二维码组件封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。