VUE----生成二维码

我使用的是vue-cli2

1.下载插件:

npm install  qrcodejs2 --save

2.示例代码：

<template>
    <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>这是二维码组件</span>
          </div>
          <div class="text item">
            1.引入QRCode封装组件
          </div>
          <div class="text item">
            2.组件中引入
          </div>
          <div class="text item">
            3.在方法中创建二维码，在mounted挂载函数处调用
          </div>
          <div class="text item">
            <div class="qrcode" ref="qrid"></div>
          </div>
        </el-card>
    </div>
</template>

<script>
    import QRCode from 'qrcodejs2'
    export default {
        name:'Erweima',
        methods: {
        creatQrCode(info,width,height) {
        var qrcode = new QRCode(this.$refs.qrid, {
            text: info,                          //二维码内容
            width: width,                        //宽度
            height: height,                      //高度
            colorDark: '#000000',                //二维码颜色
            colorLight: '#ffffff',               //二维码背景颜色
            correctLevel: QRCode.CorrectLevel.H  //准确率M(0)、L(1)、H(2)、Q(3)
        })
          },
        },
        mounted(){
          this.creatQrCode('this is why we play',100,100);
        },
    }
</script>

<style scoped>
    .qrcode{
        display: inline-block;
        background-color: #fff;
        border:10px solid #DCDCDC;
        box-sizing: border-box;
    }
    .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 95%;
    margin-left:2.5%;
    margin-top:20px;
  }
</style>

3.说明：

js生成的二维码是没有边框的，为了美化二维码样式，可以给生成二维码的div新增border属性：

  .qrcode{
        display: inline-block;
        background-color: #fff;
        border:10px solid #DCDCDC;
        box-sizing: border-box;
    }