vue 项目动态生成二维码（vue-qr）

vue-qr 地址

Binaryify/vue-qr: The Vue Component for Awesome-qr.js (github.com)

首先下载npm

npm install vue-qr --save

在main内选择引入

// vue2.0
import VueQr from 'vue-qr'

// vue3.0 (support vite)
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
new Vue({
    components: {VueQr}
})

引用

import VueQr from 'vue-qr'

export default {
  components:{
    VueQr
  },
}

使用示例  直接当作标签使用即可  其他选项可以参考上面官方文档

<vue-qr
    // 二维码大小
    :size="80"
    // 边距 尽量设置为0
    :margin="0"
    // 背景颜色为实点颜色
    :auto-color="true"
    // 数据区域点缩小比例,默认为1
    :dot-scale="1"
    // 数据内容
    :text="www.baidu.com"
/>