VUE 生成二维码

使用qrcodejs2生成二维码：

1.安装引入qrcodejs2

npm install qrcodejs2 --save

　　

2.全局配置

import QRCode from 'qrcodejs2'
 
Vue.prototype.$qrCode = QRCode;

 

3.使用qrcodejs2生成二维码

<template>
  <div>
       {{ msg }}
     <div id="qrCode" ref="qrCodeDiv"></div>
  </div>
</template>
 
<script>
 export default {
    name: 'user',
    data () {
      return {
        msg: '二维码'
      }
    },
     mounted: function () {
     //生命周期mounted 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。
     //实例已完成以下的 配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。
          this.$nextTick(function () {
            this.checkOut();
          })
        },methods:{
      checkOut:function(){
        new this.$qrCode(this.$refs.qrCodeDiv, {
          text: 'http://sinoeve.com',
          width: 200,
          height: 200,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: this.$qrCode.CorrectLevel.L//容错率，L/M/H
        })
      }
    }
 }
</script>
 
<style>
</style>

　　

效果图：