安装插件
// npm
npm install vue-qr --save
// yarn
yarn add vue-qr
导入插件
// vue2.x
import VueQr from 'vue-qr';
// vue3.x
import vueQr from 'vue-qr/src/packages/vue-qr.vue';
使用
<div @click="qrClick">
<vue-qr
class="qr-code"
ref="qrCode"
:text="downloadAddress()"
:logoSrc="previewImage(detailInfo.appIcon)"
:color-dark="randomColor"
:callback="qrCodeCallback"
width="120"
height="120"
></vue-qr>
</div>
data(){
return {
randomColor: 'black',
qrCodeUrl: '', // 存放生成的二维码url
}
}
methods:{
// 下载地址
downloadAddress() {
return `${window.location.origin}/#/downloadPage?
appCode=${this.detailInfo.appCode}`;
},
// 预览图片
previewImage(id) {
return id ? `${process.env.VUE_APP_STORE_SERVICE_API}space/${id}` :
require('@/assets/common/morenLOGO.png');
},
qrCodeCallback(url) {
this.qrCodeUrl = url;
},
// 下载二维码
qrClick() {
const a = document.createElement('a');
a.download = '二维码';
a.href = this.$refs.qrCode.$el.src;
a.click();
}
}
css实现鼠标划过二维码放大效果
.qr-code:hover {
cursor: pointer;
transform: scale(2); // 放大2倍
transition: all 0.3s; // 设置加载时间
}