Vue 中 qrcode.vue 生成二维码以及添加中心logo

一、安装插件

npm i qrcode.vue -S

二、使用组件

<template>
  <van-popup
    v-model="showQr"
    v-bind="popupConfig"
  >
    <div class="qrcode-wrapper">
      <div class="qrcode-title">
        <van-icon name="scan" />
        <span>{{$t('appQrCode.title')}}</span>
      </div>
      <div class="qrcode-main">
        <qrcode-vue
          class="qrcode-code"
          level="H"
          :size="qrCodeSize"
          :value="getLocalUrl()"
        />
        <section class="logo shadowed">
          <BaseImage :src="logo" />
        </section>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { Popup, Icon } from 'vant';
import QrcodeVue from 'qrcode.vue';

export default {
  name: 'AppQrCode',
  components: {
    [Popup.name]: Popup,
    [Icon.name]: Icon,
    QrcodeVue
  },

  props: {
    popupConfig: {
      type: Object,
      default: () => ({
        overlay: true,
        position: 'bottom',
        transitionAppear: true,
        safeAreaInsetBottom: true,
        closeable: true
      })
    },
    logo: {
      type: String,
      default: 'https://lark-assets-prod-aliyun.oss-cn-hangzhou.aliyuncs.com/yuque/0/2021/jpeg/1505703/1617878234987-resources/11316848/jpg/ba813e1a-b8ac-4d9a-a796-088a169bad43.jpeg?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1624251071&Signature=obJX0Ziien02rj%2BJ31Rc2QR3Wsg%3D'
    }
  },

  data() {
    return {
      qrCodeSize: document.body.offsetWidth / 2
    };
  },

  computed: {
    showQr: {
      get() {
        return this.$store.getters.showQr;
      },
      set(val) {
        this.$store.dispatch('app/toggleShowQr', val);
      }
    }
  },

  methods: {
    getLocalUrl() {
      return window.location.href;
    }
  }
};
</script>

样式代码:

.qrcode {
    &-wrapper {
        padding: 60px 35px;
        font-size: 14px;
        text-align: center;
    }

    &-title {
        margin-bottom: 30px;

        i {
            margin-right: 4px;
            color: @primary-color;
            font-size: 16px;
            vertical-align: text-bottom;
        }
    }

    &-main {
      position: relative;

      .logo {
        width: 1.1rem;
        height: 1.1rem;
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        border: 2px solid #fff;
        border-radius: 6px;;
      }
      
	  .shadowed {
    	box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
	  }

      .van-image {
        border-radius: 4px;
        overflow: hidden;
      }
    }
}

三、最终效果

qrcode.vue暂时不支持配置二维码中间logo，后续作者会完善功能，另有附带logo配置的vue-qr插件，但是包体积足足有4m+之大，不符合项目预期，所以暂时使用定位覆盖临时方案。
https://github.com/scopewu/qrcode.vue/issues/36