qrcodejs2--Vue生成二維碼組件封裝

1.安裝qrcodejs2：

npm install  qrcodejs2 --save

yarn add  qrcodejs2

2.初步封裝組件：

/**
 * @file 生成二維碼的組件
 * @author Walker
 * @date 2020-03-16
 */
<template>
  <div class="emqrcode">
    <button @click="showQRcode">點擊分享二維碼</button>
    <div id="qrcode" ref="qrcode"></div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  components: { QRCode },
  data() {
    return {
      link: "https://www.baidu.com/"
    };
  },
  methods: {
    /**
     * @description 生成二維碼
     * @param  {number} qWidth  寬度
     * @param  {number} qHeight  高度
     * @param  {string} qText  二維碼內容（跳轉連接）
     * @param  {string} qRender 渲染方式（有兩種方式 table和canvas，默認是canvas）
     */
    qrcode(qWidth, qHeight, qText, qRender) {
      let qrcode = new QRCode("qrcode", {
        width: qWidth,
        height: qHeight,
        text: qText,
        render: qRender
      });
    },

    /**
     * @description 點擊顯示二維碼
     */
    showQRcode() {
      //二維碼初始化 點擊一次添加一個二維碼
      this.$refs.qrcode.innerHTML = "";
      this.$nextTick(function() {
        this.qrcode(124, 124, this.link, "canvas");
      });
    }
  }
};
</script>

<style lang="less">
.emqrcode {
  width: 100%;
  background-color: #f00;
}
</style>

最後的樣式：

3.結合ElementUI：

/**
 * @file 生成二維碼的組件
 * @author Walker
 * @date 2020-03-16
 */
<template>
  <div class="emqrcode">
    <el-button type="primary" class="left_transition" @click="showShare = !showShare">
      <i class="el-icon-caret-left"></i>
    </el-button>

    <div class="share_box">
      <transition name="el-zoom-in-center">
        <div v-show="showShare" class="transition-box">
          <el-button type="text" class="share_QRcode" @click="showQRcode">點擊分享二維碼</el-button>
        </div>
      </transition>
    </div>

    <el-dialog
      title="分享二維碼"
      custom-class="dialog_style"
      :visible.sync="centerDialogVisible"
      width="40%"
      center
      @open="showQRcode"
    >
      <div :append-to-body="false" id="qrcode" ref="qrcode"></div>
      <span slot="footer" class="dialog-footer">
        <a class="linl_style">複製鏈接:{{link}}</a>
        <!-- <el-button @click="centerDialogVisible = false">取 消</el-button> -->
        <!-- <el-button type="primary" @click="centerDialogVisible = false">確 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  components: { QRCode },
  data() {
    return {
      link:"https://www.baidu.com/",
      centerDialogVisible: false,
      showShare: false
    };
  },
  methods: {
    /**
     * @description 生成二維碼
     * @param  {number} qWidth  寬度px
     * @param  {number} qHeight  高度px
     * @param  {string} qText  二維碼內容（跳轉連接）
     * @param  {string} qRender 渲染方式（有兩種方式 table和canvas，默認是canvas）
     */
    qrcode(qWidth, qHeight, qText, qRender) {
      let qrcode = new QRCode("qrcode", {
        width: qWidth,
        height: qHeight,
        text: qText,
        render: qRender
      });
    },

    /**
     * @description 遮罩打開的回調 點擊顯示二維碼
     */
    showQRcode() {
      //收回抽屜
      this.showShare = false;
      //調用函數生成二維碼
      this.$nextTick(function() {
      	//二維碼初始化 點擊一次添加一個二維碼
        this.$refs.qrcode.innerHTML = "";
        this.qrcode(124, 124, this.link, "canvas");
      });
	  //打開遮罩
      this.centerDialogVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.left_transition {
  border-radius: 0;
  border: none;
  border-right: 1px solid #ccc;
  background-color: #4157ff;
  height: 36px;
  padding: 0 4px 0 3px;
}
.share_box {
  display: inline-block;
  height: 36px;
  border: none;
  vertical-align: top;
}
.emqrcode {
  position: fixed;
  right: 17px;
  top: 20px;
  width: auto;
  // background-color: #4157ff;
  z-index: 3000;
  color: #ffffff;
}
.share_QRcode {
  height: 36px;
  color: #ffffff;
  font-size: 10px !important;
}
.share_QRcode :hover {
  color: #eef;
}
.emqrcode :hover {
  // background-color: rgb(167, 206, 255);
}
.transition-box {
  background-color: #4157ff;
  text-align: center;
  color: #fff;
  padding: 0 2px;
  box-sizing: border-box;
  border: none;
}
.linl_style {
  color: #4157ff;
  font-size: 12px;
}
</style>
<style lang="less">
#qrcode {
  img {
    margin: 0 auto;
  }
}
</style>

效果如圖：