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, 背景圖外將繪制白色邊框