Vue - 详细介绍vue-qr在线生成二维码组件（Vue2 & Vue3）

Vue - 详细介绍vue-qr在线生成二维码组件（Vue2 & Vue3）

在对于二维码生成中有许多组件，下面介绍关于自定义比较高的vue-qr组件，能自定义设置背景颜色、背景图片、背景Gif图、实点和空白区的颜色、中心Logo的图片和边距。

一、安装

npm install vue-qr --save

二、组件内引用VueQr

# Vue2 
import VueQr from "vue-qr";
export default {
  components: {
    VueQr
  },
};

# Vue3
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

三、如何使用

1.创建简易二维码：

<template>
    <vue-qr
      text="https://www.baidu.com/"
      :size="200"
    ></vue-qr>
</template>

2.修改实点颜色(colorDark)和空白区颜色(colorLight)：

注意：空白区颜色如果高于实点颜色，则实点颜色和空白区颜色互换！

<template>
    <vue-qr
      colorDark="#EE6779"  
      colorLight="#F5E1D9" 
      text="https://www.baidu.com/"
      :size="200"
    ></vue-qr>
</template>

3.添加背景图片：

注意：出现实点挡住背景无法显示完全，可通过调整dotScale大小和correctLevel来让背景图显示完全！

<template>
    <vue-qr 
    :size="200" 
    :bgSrc="image" 
    :correctLevel="2"  
    :dotScale="0.5" 
    text="https://blog.csdn.net/miaomiaowins">
    </vue-qr>
</template>

# Vue2
<script>
import VueQr from "vue-qr";
export default {
  data() {
    return {
      image: require("../assets/bg.jpg"),
    };
  },
  components: {
    VueQr,
  },
};
</script>

# Vue3
<script setup>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
const image = new URL('./assets/bg.jpg', import.meta.url).href
</script>

4.添加GIF背景图片：

注意：添加Gif背景会影响性能，导致图片生成时间增加

<template>
    <vue-qr 
    :size="200" 
    :gifBgSrc="gifImage" 
    :correctLevel="2"  
    :dotScale="0.5" 
    text="https://blog.csdn.net/miaomiaowins">
    </vue-qr>
</template>

# Vue2
<script>
import VueQr from "vue-qr";
export default {
  data() {
    return {
      gifImage: require("../assets/bg.gif"),
    };
  },
  components: {
    VueQr,
  },
};
</script>

# Vue3
<script setup>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
const gifImage= new URL('./assets/bg.gif', import.meta.url).href
</script>

5.放置中心Logo图标：

<template>
    <vue-qr 
      :bgSrc="image"
      :dotScale="0.5"
      :correctLevel="2"
      text="Hello world!"
      :logoSrc="logoSrc"
      :size="200">
    </vue-qr>
</template>

# Vue2
<script>
import VueQr from "vue-qr";
export default {
  data() {
    return {
      image: require("../assets/bg.jpg"),
      logoSrc: require("../assets/logo_1.png"),
    };
  },
  components: {
    VueQr,
  },
};
</script>

# Vue3
<script setup>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
const image = new URL('./assets/bg.jpg', import.meta.url).href
const logoSrc = new URL('./assets/logo_1.png', import.meta.url).href
</script>

四、属性介绍

callback方法：

<vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>

export default {
    methods:{
        test(dataUrl,id){
            console.log(dataUrl, id)
        }
    }
}

以上是对vue-qr组件的详细介绍，针对于设置中心点logo背景颜色失效的问题，猜测应该是组件版本问题，对于高自定义的在线生成二维码组件有兴趣的小伙伴们，可以尝试一下，对于需要用到动态二维码生成扫描的项目是有一些帮助的！

参考链接：
Awesome-qr.js：Awesome-qr.js
vue-qr：vue-qr项目地址