QRCode.js

1.0 安装：

  cnpm install --save qrcodejs2

2.0 在组建中引入：

  import QRCode from 'qrcodejs2'  // 引入qrcode

3.0 使用：

3.1.0 页面中直接使用：

  <template>
    <div>
      <div id="qrcode"></div> <!-- 创建一个div，并设置id为qrcode -->
    </div>
  </template>

  <script>
  import QRCode from 'qrcodejs2'  // 引入qrcode
  export default {
    name : 'test',
    mounted () {
      this.qrcode();
    },
    methods: {
      qrcode() {
        let qrcode = new QRCode('qrcode', {
          width: 132,  
          height: 132,
          text: 'https://www.baidu.com', // 二维码地址
          colorDark : "#000",
          colorLight : "#fff",
        })
      },
    }
  }
  </script>

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

3.2.0 弹框中使用：

  <template>
    <div>
      <p @click="getinvite()">点击出现弹框</p>
      // 弹框
      <div v-if="isinvite==true">
          <div class="qrcode" ref="qrcodeContainer"></div> 
      </div>
    </div>
  </template>

  <script>
  import QRCode from 'qrcodejs2'  // 引入qrcode
  export default {
      data(){
          return {
            isinvite:false  
          }
      },
    methods: {
      // 点击按钮出现弹框，调取显示二维码(弹框显示隐藏type 0 显示；type 1 隐藏 )
      getinvite(type) {
        this.isinvite = !this.isinvite;
        // 当显示弹框的时候调取二维码接口
        if (type == 0) {
          this.showQRCode(); // 调取生成二维码
        }
      },
      // 显示二维码
      showQRCode(){  
          this.$nextTick(()=>{  
              var qrcode = new QRCode(this.$refs.qrcodeContainer, {  
                  text: 'https://wallimn.iteye.com',  
                  width: 100,  
                  height: 100,  
                  colorDark: '#000000',  
                  colorLight: '#ffffff',  
                  correctLevel: QRCode.CorrectLevel.H  
              })  
          })
      },  
    }
  }
  </script>

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

4.0 清楚

  qrcode.clear(); // 清除代码