后端返回的是链接,我们要将链接转化为二维码,并实现下载功能
官方介绍: https://www.npmjs.com/package/vue-qr
1. 安装
npm install vue-qr --save
2、导入vue项目中使用
<template> <vue-qr :text="link" :size="downImgSize" :margin="0" ref='Qrcode'></vue-qr> <div class="mt20"> {{$t('二维码下载')}} : <Button class="ml10 qrcodeImg" size='small' @click="downloadImg(512)">512 X 512</Button> <Button class="ml10 qrcodeImg" @click="downloadImg(256)">256 X 256</Button> <span class="tips ml10">{{$t('(点击即可下载)')}}</span> </div> </template> <script> import vueQr from 'vue-qr' export default { components: { vueQr }, data() { return { link: '后端返回的链接地址', downImgSize: 512 } }, methods: { // 下载不同尺寸的二维码 downloadImg (size) { this.downImgSize = size console.log(this.downImgSize) const iconUrl = this.$refs['Qrcode'].$el.src const a = document.createElement('a') const event = new MouseEvent('click') a.download = this.$t('领取链接二维码') a.href = iconUrl a.dispatchEvent(event) } } } </script>
3、常用属性介绍