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 项目地址