vue生成二维码带logo

yarn add vue-qr

详细配置可访问vue-qr - npmvue生成二维码带logohttps://www.npmjs.com/package/vue-qr

<template>
    <vue-qr :logoSrc="logoSrc" :text="codeUrl" :size="95" :logoScale="0.3" :callback="getCodeUrl" :margin="5" :logoCornerRadius="0" :correctLevel="3"></vue-qr>
</template>

<script>
    import VueQr from 'vue-qr'
    import code_logo from '@/assets/image/code_logo.png'
    export default {
        components: {VueQr},
        data () {
          return {
            codeUrl: 'xxxx',
            logoSrc: code_logo,
            codeDataUrl: ''
          }
        },
        methods: {
            getCodeUrl (dataUrl) {
             this.codeDataUrl = dataUrl // 可用于canvas画图制作分享海报
            }
        }
    }
</script>

注意:

1.correctLevel需要设置为3,否则微信安卓机识别不出 

2.logoCornerRadius虽然写着默认为0,但是实际上需要设置为0

上一篇:关于我


下一篇:<20211019> Win10不明原因丢失任务提示栏里的Wifi以及网络任务提示栏logo