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

 

 

参考：

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

2.element-ui生成二维码

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

 

技术点：

1.生成二维码：使用QRCode

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

 

实现代码：

　　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
      });
    },

效果：

 

 

 

   

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