在vue中生成二维码

---

在vue项目中使用二维码

vue-qr

官方文档：https://www.npmjs.com/package/vue-qr

1.安装

npm install vue-qr --save

2.引入

可以在入口文件或者组件中引用

import VueQr from 'vue-qr'
 
new Vue({
    components: {VueQr}
})

3.使用

最基础的使用如下

<template>
    <div>
        <vue-qr text="Hello word"></vue-qr>
    </div>
</template>

<script>
import vueQr from "vue-qr";
export default {
    data() {
        return {};
    },
    components: {
        vueQr,
    },
};
</script>

如果需要修改颜色、背景、中心的logo等，可以对vue-qr进行配置

详情可见官网，下面是一些常用配置

text	二维码内容
size	二维码边长
margin	外边距宽度
colordark	实点的颜色
bgSrc	背景图片的地址
logoSrc	二维码中间的logo图片
logoScale	中间logo图片的尺寸