生成个性化二维码

一、需求背景

目的很简单，前端生成一个二维码；二维码中间有个性化的logo即可。【VUE框架示例】

二、上效果

三、需要的工具【插件】

1.qrcodejs2 npm安装即可；

四、具体代码分析

<template>
  <el-dialog :visible.sync="clientShow" :modal-append-to-body="false" center custom-class="clien-dialog" :show-close="false" :append-to-body="true" @open="open">
    <div slot="title" class="dialog-header">
      <div class="clitile">下载二维码</div>
      <span @click="hide" class="icon-close">×</span>
    </div>
    <div class="dialog-body">
      <div class="ios">
        <div class="rwm">
        <!--ios二维码插入的位置  -->
          <div id="ios" ref="ios" />
        </div>
        <div class="rwm-text ios-text">
          <span>扫描二维码</span>
          <span>下载iOS正式版</span>
        </div>
      </div>
      <div class="az">
        <div class="rwm">
        <!--Android二维码插入的位置  -->
          <div id="az" ref="az" />
        </div>
        <div class="rwm-text az-text">
          <span>扫描二维码</span>
          <span>下载Android正式版</span>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

上面的代码就是一个简单的弹窗，里面承载了两个二维码；只需要根据ref来插入我们生成的二维码就行了；主要实现还是在JS。

<script>
import QRCode from 'qrcodejs2';
import iosIcon from './ios.png';//图片就自己准备，随便命名的---ios
import azIcon from './az.png';//图片就自己准备，随便命名的---Android
export default {
  data() {
    return {
      clientShow: false,//标识弹窗是否打开
    };
  },
  methods: {
    show() {
      this.clientShow = true;
    },
    hide() {
      this.clientShow = false;
    },
    generateQrcode(url = '',box) {
      let boxEle= this.$refs[box];
      boxEle.innerHTML = '';
      let imgDiv = document.createElement('img');//创建一个HTML图片元素出来
      imgDiv.src = box=='ios'?iosIcon:azIcon;//图片的内容写进去
      imgDiv.style.position = 'absolute';//样式给进去
      imgDiv.style.width = '40px';
      imgDiv.style.height = '40px';
      boxEle.appendChild(imgDiv);//插入到页面中
      let qrcode = new QRCode(boxEle, {//生成二维码的逻辑
        width: 154, //图像宽度
        height: 154, //图像高度
        colorDark: '#000000', //前景色
        colorLight: '#ffffff', //背景色
        typeNumber: 4,
        correctLevel: 3 //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
      });
      qrcode.clear(); //清除二维码
      qrcode.makeCode(url); //调用实例中的方法生成另一个新的二维码
      let mar = boxEle.offsetHeight - imgDiv.offsetHeight / 2;
      imgDiv.style.margin = mar;
    },
    open() {
      this.$nextTick(() => {
        this.generateQrcode('https://www.baidu.com','ios');
        this.generateQrcode('https://www.baidu.com','az');
      });
    }
  }
};
</script>

//没加scope，如果加了自己记得加/deep/来修改elementUi的样式
<style lang="less">
.clien-dialog {
  width: 700px;
  .el-dialog__header {
    padding: 0 !important;
  }
  .el-dialog__body {
    padding: 0 !important;
  }
  .dialog-body {
    width: 440px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding-bottom: 81px;
    #ios {
      width: 170px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #az {
      width: 170px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .rwm {
      width: 100%;
      height: 170px;
      background: #f4f4f4;
      border-radius: 7px;
    }
    .rwm-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 16px;
      font-size: 18px;
      color: #666666;
      line-height: 25px;
    }
  }
  .dialog-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 70px;
    .clitile {
      margin-top: 33px;
      font-size: 18px;
      line-height: 25px;
      font-weight: 600;
    }
    .icon-close {
      position: absolute;
      right: 26px;
      width: 13px;
      height: 13px;
      top: 32px;
      z-index: 100;
      color: #666666;
      font-size: 23px;
      cursor: pointer;
      line-height: 24px;
      display: inline-block;
    }
  }
}
</style>