1、安裝依賴：

// 二維碼組件 npm install vue-qr --save//實現復制二維碼鏈接 npm install clipboard --save

2、使用組件：

<!-- 二維碼生成組件使用:<template>.....//二維碼<QRCode ref="qrcode" />...</template><script>import QRCode from '@/components/qrcode'export default {data() {return {}},components: { QRCode },methods: {// 按鈕點擊事件=>生成二維碼generateQRCodeBtn() {let param={...this.siteInfoList}this.$refs.qrcode.init(param,'站點二維碼','1') //(二維碼內容,二維碼下載名稱)},}}</script>--> <template><el-dialog :visible.sync="erCode" center :title="title" width="15%" :fullscreen="fullscreen"><i class="el-icon-full-screen fullscreen" @click="isFullScreen()"></i><div class="ebox"><vue-qr ref="Qrcode" :text="dataObj.text" :logoSrc="dataObj.logo" qid="testQrId"></vue-qr></div><div class="eboxBtn"><a class="tag-copy" :data-clipboard-text="dataObj.text" @click="copyShareLink()">復制二維碼</a><a :href="exportLink" @click="downloadImg()" :download="downloadFilename">下載二維碼</a></div><section class="footer"><el-button type="danger" @click="cancelBtn()">取消</el-button></section></el-dialog> </template><script> import VueQr from 'vue-qr'// 二維碼組件 import Clipboard from 'clipboard'// 復制粘貼組件export default {data() {return {erCode: false,//彈框顯示與隱藏title: '二維碼',//彈框名稱dataObj: {text: '',//二維碼信息// logo: require('@/assets/img/avatar5.png')logo: ''},exportLink: '',downloadFilename: '',//下載圖片名稱fullscreen: false,}},components: { VueQr },methods: {// 生成二維碼init(text, title,type) {this.dataObj.text = JSON.stringify(text) //如果要跳轉到想要的頁面this.dataObj.text=頁面地址+參數//if (type && type == '1') {// this.dataObj.text = "https://yun.kldhq.com/carplanenter/index.html#/?jgid=" + text.deptId + "&bdid=" + text.stationId +// "&poundType=" + text.poundType + "&fhdw=" + text.consigner + "&shdw=" + text.consignee + "&yxq=" + text.usefulTime +// "&variety=" + text.variety.toString() + "&specification=" + text.specification//}title?this.title = title:this.title ='二維碼'this.erCode = true},// 復制鏈接async copyShareLink() {const This = thislet clipboard = new Clipboard('.tag-copy')await clipboard.on('success', e => {This.$message.success('鏈接復制成功！')clipboard.destroy() // 釋放內存})clipboard.on('error', e => {This.$message.error('該瀏覽器不支持自動復制！') // 不支持復制 clipboard.destroy() // 釋放內存 })},// 下載二維碼圖片downloadImg() {let Qrcode = this.$refs.Qrcodethis.exportLink = Qrcode.$el.currentSrcthis.downloadFilename = this.title},// 取消按鈕cancelBtn() {this.erCode = false},// 彈框是否全屏isFullScreen() {this.fullscreen = !this.fullscreen},} } </script><style scoped lang="scss"> .ebox {display: flex;align-items: center;justify-content: center; } i.fullscreen {position: absolute;right: 20px;top: 0px;padding: 10px;cursor: pointer;z-index: 9999; }i.fullscreen:hover {color: #1890FF; }.eboxBtn {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;width: 100%;a {flex: 1;display: flex;justify-content: center;margin: 5px 0 0 5px;color: #FFF;background-color: #67C23A;border-color: #67C23A;padding: 5.5px 15px;font-size: 14px;border-radius: 3px;&:nth-child(1) {background-color: #1890FF;border-color: #1890FF;}} }.footer {text-align: center;padding-top: 25px; } </style> <style scoped>>>>.el-dialog__title {font-weight: bold;color: #5a5e66; }>>>.el-dialog__headerbtn {position: absolute;top: 5px;right: 5px; }>>>.el-dialog--center .el-dialog__body {padding: 0 25px 25px;border-top: 1px solid #5a5e66; }>>>.el-button--danger {width: 80%; } </style>

如何需要掃碼跳轉到別的頁面=>this.dataObj.text需要加頁面網址及頁面加載所必要的參數(參數可加密,但獲取參數時需解密)

3.最終效果:

總結

以上是生活随笔為你收集整理的Vue实现自动生成二维码并实现复制下载功能：的全部內容，希望文章能夠幫你解決所遇到的問題。

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