vue使用qrcode 生成二维码

自用笔记，如果能帮到你可以直接拿来用

一、安装

npm install --save qrcode 

二、引入

import QRCode from 'qrcode'; 

三、封装成组件进行使用

<template>   <div class="QRCode" :style="{'width':width, 'height':height}">     <canvas :id="canvasId" ref="canvas" :style="{'width':width, 'height':height}"></canvas>   </div> </template>

四、js部分

<script>   import QRCode from "qrcode";    export default {     name: "QRCode",     props: {       content: {         type: String,         default: "测试二维码"       },       width: {         type: String,         default: "100"       },       height: {         type: String,         default: "100"       },       codeName: {         type: String,         default: "二维码"       },       load: {         type: Boolean,         default: true       },       view: {         type: Boolean,         default: true       }     },     data() {       return {         canvasId: "",        };     },     computed: {},     created() {       this.canvasId = this.getUUID();       this.$nextTick(() => {         this.init();       });     },     mounted: function () {     },     methods: {              // handlePrintText() {       //   this.$print(this.$refs.print)       // },       // // 打印二维码       // getPrinting() {       //   let employeeName = "溯源信息";       //   let printContent = ''       //   document.getElementById("qrcode").innerHTML = printContent;       //   let new_str = document.getElementById("qrcode").innerHTML; //获取指定打印区域       //   //构建新网页(关键步骤,必须先构建新网页,在生成二维码,否则不能显示二维码)       //   document.body.innerHTML = new_str;       //   for (let j = 0; j < 1; j++) {       //     document.getElementById("XQ").innerHTML = ""; //置空       //     new QRCode(document.getElementById("XQ"), {       //       text: "dfjkdjdfjak123456789",       //       width: 250,       //       height: 250,       //       colorDark: "#000000",       //       colorLight: "#ffffff",       //     });       //   }       //   window.print(); //打印刚才新建的网页       //   window.location.reload();       //   return false;       // },       saveCode() {         //下载二维码         console.log('二维码', this.$refs.canvas);         let base64Img = this.$refs.canvas.toDataURL('image/jpg');         //创建下载标签，然后设置链接和图片名称         let a = document.createElement('a')         a.href = base64Img         a.download = '二维码' + Date.now()         a.click()         //销毁元素         a.remove()       },       init() {         let width = this.width,           height = this.height;         QRCode.toCanvas(           document.getElementById(this.canvasId),           this.content,           { width, height, toSJISFunc: QRCode.toSJIS },         );       },       getUUID() {         let d = new Date().getTime();         let uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(           /[xy]/g,           function (c) {             let r = (d + Math.random() * 16) % 16 | 0;             d = Math.floor(d / 16);             return (c == "x" ? r : (r & 0x7) | 0x8).toString(16);           }         );         return uuid;       }     },     watch: {       content() {         this.init();       }     }   }; </script>

五、css样式

<style lang="scss" scoped>   .QRCode {     display: inline-block;     position: relative;     overflow: hidden;      .QQMode {       position: absolute;       left: 0;       bottom: 100%;       right: 0;       height: 0;       background-color: rgba(0, 0, 0, 0.45);       transition: all 200ms ease-in-out;       cursor: pointer;       color: #fff;       display: flex;       justify-content: space-around;       align-items: center;       font-size: 20px;       font-weight: bolder;       box-sizing: border-box;       padding: 10px;     }   }    .QRCode:hover .QQMode {     bottom: 0;     height: 100%;   } </style>

六、父组件使用

1.引入

    import QRCode from "./QRCode.vue"; 

2.注册

  components: {             QRCode         },

3.页面使用（表格中使用案例）

把对应的网址链接传入codeContent中就可以显示二维码

        <el-table-column label="溯源码" prop="codeContent" width="180" height="94">                         <template slot-scope="scope">                             <div>                                 <el-popover placement="top-start" title="" trigger="hover">                                     <QRCode alt="" :content="scope.row.codeContent" id="printTest" :width="'200'"                                         :height="'200'"></QRCode>                                     <QRCode slot="reference" :content="scope.row.codeContent" :width="'50'"                                         :height="'50'" ref="refserence">                                     </QRCode>                                 </el-popover>                             </div>                         </template>                     </el-table-column>

七、效果图