vue-qr specific two-dimensional code is generated using

      1. The first is to install,

        

npm install vue-qr --save

      He is using the same components and use

      

<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>

      

Next, some common attributes of vue-qr:

text to be encoded content
size dimensions, same length and width, comprising margins
outside the two-dimensional code image from the margin, the default 20px
colorDark solid dots color
color space area colorLight
bgSrc to be embedded in the background picture address
gifBgSrc to be embedded in the background gif address, after setting the general background will fail. Setting this option affects performance
backgroundColor background color
backgroundDimming superimposed on the background color, there is some help in decoding difficult
logoSrc LOGO embedded in the center of the two-dimensional code address
blank border LOGO logo around logoMargin, the default is 0
logoBackgroundColor Logo background color, margin needs to be set logo
logoCornerRadius lOGO ID and border fillet radius, default is 0
border outer whiteMargin If set true, a white background is drawn

Guess you like

Origin www.cnblogs.com/jflalove/p/11950276.html