vue-qr 二维码悬浮放大，点击下载二维码

安装插件

// 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; // 设置加载时间
 }