一、安裝插件

npm i qrcode.vue -S

二、使用組件

<template><van-popupv-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-vueclass="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

總結

以上是生活随笔為你收集整理的Vue 中 qrcode.vue 生成二维码以及添加中心logo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。