vue-qr 二维码悬浮放大，点击下载二维码_vue 下载二维码图片放大-优快云博客

本文链接：https://blog.youkuaiyun.com/chensi_07/article/details/136076769

本文介绍了如何在Vue3项目中通过npm或yarn安装vue-qr插件，展示了导入、配置和使用该插件创建二维码的步骤，以及如何实现鼠标悬停时的放大效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装插件

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