前端vue生成二维码带logo并且可以点击下载保存_vue实现扫描二维码

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

下载插件：npm install vue-qr

<template>

  <div class=”sg-qrcode”>

    <vue-qr

      :text=”qrcodeText”

      :correctLevel=”3″

      :size=”250″

      :margin=”10″

      colorDark=”#000″

      colorLight=”white”

      backgroundColor=”white”

      backgroundDimming=”white”

      :logoSrc=”require(‘@/assets/logo.png’)”

      :logoScale=”.2″

      :logoMargin=”5″

      logoBackgroundColor=”white”

    ></vue-qr>

  </div>

</template>

<script>

import vueQr from “vue-qr”; // 引入二维码生成组件

export default {

  components: {

    vueQr // 二维码生成组件

  },

  data() {

    return {

      qrcodeText: “测试二维码” //二维码内容（扫码识别后需要访问的网址）

    };

  }

  // 属性说明：

  // text 编码的内容（支持文字、网址）

  // correctLevel 容错级别 0-3（容错级别越高，代表遮住二维码部分越多，依然可以识别）

  // size 尺寸, 长宽一致, 包含外边距（推荐20px）

  // margin 二维码图像的外边距, 默认20px

  // colorDark 实点的颜色（默认黑色）

  // colorLight 空白区的颜色（默认白色）

  // bgSrc 嵌入的背景图地址（支持png、jpg）

  // gifBgSrc 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能

  // backgroundColor 背景色（默认白色）

  // backgroundDimming 叠加在背景图上的颜色, 在解码有难度的时有一定帮助（默认白色）

  // logoSrc 嵌入至二维码中心的 LOGO 地址（支持png、jpg）

  // logoScale 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin),（默认 0.2）

  // logoMargin LOGO标识周围的空白边框, 默认为0（推荐5px）

  // logoBackgroundColor Logo 背景色,需要设置 logo margin（默认白色）

};

</script>