弹窗-二维码生成与下载

 

 

div(class='zzc' v-show="showCopyPassword")

　　div(class='dia_qrcode' @click="handleClose")

　　div(class='dia_qrcode_div')

　　　　el-button(class='dia_qrcode_btn', @click="downLoad") 下载二维码

　　　　div(id="qrcode")

 

import QRCode from 'qrcodejs2'

 

 

showCopyPassword: false,

 

 

 

async copyPassword(row,val) {

 

　　this.showCopyPassword = true;

　　this.qrcode = new QRCode('qrcode', {

　　text: actionButtonUrl + row.activityId,

　　　　width:150,

　　　　height: 150,

　　　　colorDark: '#000', // 二维码颜色

　　　　colorLight: "#ffffff" // 背景颜色

　　});

},

handleClose() {

　　document.getElementById('qrcode').innerHTML = "";

　　this.showCopyPassword = false;

},

downLoad() {

　　const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');

　　if(myCanvas && myCanvas.length) {

　　　　console.log(myCanvas);

　　　　const a = document.createElement('a')

　　　　a.href = myCanvas[0].toDataURL('image/png');

　　　　a.download = '二维码';

　　　　a.click()

　　　　this.$message({

　　　　　　message: "正在进行下载保存",

　　　　　　type: 'success'

　　　　})

　　}else {

　　　　this.$message.error('下载失败!')

　　}

},