Vue使用vue-qr生成二维码

• npm下载vue-qr

npm install vue-qr --save

• 引入vue-qr

import VueQr from 'vue-qr';

• 注册

export default {
   name:'', 
   components:{
      VueQr,
   }
}

• vue-qr参数

1. List item
2. text 二维码，即扫描二维码后跳转的页面
3. size 二维码大小
4. margin 二维码图像的外边距, 默认 20px
5. bgSrc 嵌入的背景图地址
6. logoSrc 嵌入至二维码中心的 LOGO 地址
7. logoScale 中间图的尺寸
8. dotScale 二维码的点的大小
9. colorDark 实点的颜色（注意：和colorLight一起设置才有效）
10. colorLight 空白的颜色（注意：和colorDark一起设置才有效）
11. autoColor 若为 true, 背景图的主要颜色将作为实点的颜色即 colorDark,默认 true

• 完整代码

<template>
   <div>
      <vue-qr
         :text="imgUrl"
         :size="250"
         :logoSrc="logo"
         :logoScale="0.3">
      </vue-qr>
   </div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
   name:'', 
   components:{
      VueQr,
   },
   data() {
      return {
         imgUrl: 'http://www.baidu.com', //扫码后手机显示的页面
         logo: require("@/assets/logo.png"),//二维码中间的图片
      }
   },
   methods:{
   },
}
</script>