Vue——前端生成二維碼

與后端生成二維碼相比，前端生成二維碼更具有靈活性，下面就介紹兩種前端生成二維碼的方式，兩種方式相比之下，vue-qr比qrcode多了一個再中間添加logo的功能。

方式一：qrcode

• npm

• npm install --save qrcodejs2

   

• import

• import QRCode from 'qrcodejs2'

   

• 使用

• <div class="qrcode" ref="qrCodeUrl"></div>
   
  <script>
  methods: {
      creatQrCode() {
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text: 'xxxx', // 需要轉換為二維碼的內容
              width: 100,
              height: 100,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
          })
      },
  },
  mounted() {
      this.creatQrCode();
  },
  </script>

   

• 樣式（這里再提供一個給二維碼添加邊框的小技巧：如下圖所示，我們生成的二維碼是沒有邊框的，看起來不是很好看）
• 

   

   

  .qrcode{
      display: inline-block;
      img {
          width: 132px;
          height: 132px;
          background-color: #fff; //設置白色背景色
          padding: 6px; // 利用padding的特性，擠出白邊
          box-sizing: border-box;
      }
  }

  就有了下面的效果：

  

• 方式二：vue-qr

  • npm
           npm  install  vue-qr --save
  • import
  　　 import  vueQr from  'vue-qr'
  • 使用

    // logoSrc為logo的url地址(使用require的方式)；text為需要轉換為二維碼的內容
    <vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr>
     
    <script>
        export default {
            name: "qecode",
            data() {
                return {
                    imageUrl: require("../assets/logo.png"),
                }
            },
            components: {
                vueQr
            },
        },
    }
    </script>

    https://www.cnblogs.com/belongs-to-qinghua/p/12197878.html