Vue中使用qrcodejs2生成二维码

第一步 下载插件

需要注意，这里下载的是qrcodejs2

cnpm install --save qrcodejs2

第二步，在组件中使用

<template>
  <div>
    <div class="qrcode" ref="qrcodeContainer"></div> 
  </div>
</template>
   
<script>
import QRCode from 'qrcodejs2'  // 引入qrcode
export default {
  name : 'test',
  mounted () {
    this.$ nextTick(()=> { 
        this.qrcode();
    })
  },
  methods: {
    qrcode() {
      let qrcode = new QRCode(this.$refs.qrcodeContainer, {
        width: 100,  
        height: 100,
        text: 'https://www.baidu.com', // 二维码地址
        colorDark : "#000",
        colorLight : "#fff",
        correctLevel：QRCode.CorrectLevel.H
      })
    },
  }
}
</script>

这里分享一个小技巧，通过qrcode生成的二维码本身是没有白边的，这样的二维码并不好看↓

默认二维码.png

如果想像这样生成一个有白边的二维码，是不是更好看一点，只需要通过css样式即可实现↓

有白边的二维码.png

废话不多说，上代码↓

<style lang='less'>
 .qrcode {
    display: inline-block;
    img {
      width: 132px;
      height: 132px;
      background-color: #fff; //设置白色背景色
      padding: 6px; // 利用padding的特性，挤出白边
    }
  }
</style>