页面点击登录地址后，弹出框，四个地址，和对应的二维码展示并下载，使用element + vue实现

 

 

参考：

1.解决vue项目使用element的Dialog组件生成二维码的系列问题

2.element-ui生成二维码

 3.Element UI：<el-button> 复制功能

4.js通过QRCode生成二维码并下载

 

 

技术点：

1.生成二维码：使用QRCode

2.地址复制按钮， <el-button>

3.二维码下载 canvas

 

实现代码：

　　1.复制

    <el-button
      type="primary"
      v-clipboard:copy="loginUrl"
      v-clipboard:success="onCopySuccess"
      v-clipboard:error="onCopyError"
    >复制</el-button>
  </div>

      loginUrl: 'http://www.baidu.com',

    onCopySuccess() {
      this.$message.success("复制成功");
    },
    onCopyError() {
      this.$message.error("复制失败");
    },

 

效果：

 

 

 

 

　　2.二维码

1，终端输入 npm install  qrcodejs2  --save 安装qrcodejs2

npm install  qrcodejs2  --save

import QRCode from 'qrcodejs2'

    <div class="qrcode" id="qrcode"></div>

  //  生成二维码
    GetQRcode(){
      var qrcode = new QRCode('qrcode', {
        text: this.loginUrl,    //  需要生成二维码的内容
        width: 256,
        height: 256,
        colorDark : '#000000',
        colorLight : '#ffffff',
        correctLevel : QRCode.CorrectLevel.H
      });
    },

效果：

 

 

 

　　3.二维码下载

效果

 

 

代码：

    <!-- 登录链接   -->
    <el-dialog :title="linkTitle" :visible.sync = "openLink"  width="600px" append-to-body>

      <div class="qrcode" id="qrcode" style="text-align: center;margin: 0 auto;"></div>


      <div slot="footer" style="text-align: center">
        <el-button type="primary" plain  @click="downLoad">下载</el-button>


      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelLink">取 消</el-button>
      </div>
    </el-dialog>

    downLoad(){
      alert("1111");
      var canvas = document.getElementById('qrcode').getElementsByTagName('canvas');
      this.downLoadImage(canvas);
    },
    downLoadImage(canvas){
      var a = document.createElement("a");
      a.href = canvas[0].toDataURL('image/png');
      a.download = "二维码";
      a.click();
      a = null;
    },