vue-qr的生成二维码具体使用

　　　　　　1.首先是安装，

　　　　　　　　

npm install vue-qr --save

　　　　　　他的使用是和components 一样的使用

　　　　　　

<template>
        <div>
              <vue-qr  :text="info" :size=400  margin=40 :logoSrc="img" >
               
              </vue-qr>
              
        </div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
        name:'qr',
        data () {
          return {
            info:'',
            img:'../../static/1.jpeg'
          }
        },
        created () {
          this.info='{hel}'
        },
        components: {
          VueQr
        }
}
</script>
<style>

</style>

　　　　　　

接下来介绍下vue-qr的一些常用属性：

text                                      欲编码的内容
size  　　　　　　　　　　　　尺寸, 长宽一致, 包含外边距
margin 　　　　　　　　　　　二维码图像的外边距, 默认 20px
colorDark　　　　　　　　　　实点的颜色
colorLight 　　　　　　　　　 空白区的颜色
bgSrc     　　　　　　　　　　欲嵌入的背景图地址
gifBgSrc     　　　　　　　　  欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor 　　　　　　背景色
backgroundDimming 　　　　 叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrc 　　　　　　　　　　 嵌入至二维码中心的 LOGO 地址
logoMargin LOGO 　　　　　 标识周围的空白边框, 默认为0
logoBackgroundColor Logo    背景色,需要设置 logo margin
logoCornerRadius LOGO        标识及其边框的圆角半径, 默认为0
whiteMargin                         若设为 true, 背景图外将绘制白色边框