安装 qrcode ,使用npm
npm install vue-qr --save
在使用页面引入
import vueQr from 'vue-qr'
components: {
vueQr
},
页面映入
<el-table-column label="活动二维码" align="center">
<template slot-scope="{row}">
<el-tooltip content="点击下载二维码" placement="top-start">
<span @click="downloadImg(row.id)">
<vue-qr :text="row.link" :ref="'Qrcode' + row.id" :margin=" 0" colorLight="#fff" :logoScale="0.3" :size="100"></vue-qr>
</span>
</el-tooltip>
</template>
</el-table-column>
下载方法
downloadImg (link_id: string): void {
console.log(link_id)
const iconUrl = (this as any).$refs['Qrcode' + link_id].$el.src
const a = document.createElement('a')
const event = new MouseEvent('click')
a.download = link_id
a.href = iconUrl
a.dispatchEvent(event)
}
image.png
image.png
image.png
