d2-admin中引入qrcodejs2 ，table内显示二维码

vue d2-admin qrcodejs2

这个是vue table行内组件,显示二维码。

安装qrcodejs2

npm install qrcodejs2

引入组件

`<d2-qrcode width="50" height="50" content={row.rob_url} ></d2-qrcode>`

组件代码

·<template>
  <div>
    <div @click="qrCodeGeneration()" class="QRCode" :style="{'width':width, 'height':height}">
      <canvas :id="canvasId" :style="{'width':width, 'height':height}"></canvas>
    </div>

    <el-dialog title="二维码" :visible.sync="qrCodeVisible" width="30%" >
      <!-- 二维码图片 -->
      <div class="qrCodeUrlning" :id="canvasId2">
        <canvas  :style="{'width':'250', 'height':'250'}"></canvas>
      </div>
      <!-- 取消按钮 -->
      <span slot="footer" class="dialog-footer">
                <el-button @click="qrCodeVisible = false">取消</el-button>
            </span>
    </el-dialog>
  </div>

</template>
<script>
import QRCode from "qrcode";

import QRCode2 from 'qrcodejs2'
export default {
    name: 'd2-qrcode',
  props: {
    content: {
      type: String,
      default: "测试二维码"
    },
    width: {
      type: String,
      default: "100"
    },
    height: {
      type: String,
      default: "100"
    },
    codeName: {
      type: String,
      default: "二维码"
    },
    load: {
      type: Boolean,
      default: true
    },
    view: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      canvasId: "",
      qrCodeVisible: false // 二维码弹框
    };
  },
  computed: {},
  created() {
    this.canvasId = this.getUUID();
    this.canvasId2 = this.getUUID();
    this.$nextTick(() => {
      this.init();
    });
  },
  mounted: function() {},
  methods: {
    qrCodeGeneration(){
      // this.canvasId2 = this.getUUID();
      this.qrCodeVisible = true;
        this.$nextTick(function () {
          document.getElementById(this.canvasId2).innerHTML = "";
          let qrCodeUrl= new QRCode2(this.canvasId2, {
            width: 200,
            height: 200,
            text: this.content,
            colorDark: "#000",
            colorLight: "#fff"
          });
        });




    },
    init() {
      let width = this.width,
          height = this.height;
      QRCode.toCanvas(
          document.getElementById(this.canvasId),
          this.content,
          { width, height, toSJISFunc: QRCode.toSJIS },
          error => {}
      );
      // QRCode.toCanvas(
      //     document.getElementById(this.canvasId2),
      //     this.content,
      //     { width:"250", height:"250", toSJISFunc: QRCode.toSJIS },
      //     error => {
      //       console.log(error,"创建错误")
      //     }
      // );

    },
    getUUID() {
      let d = new Date().getTime();
      let uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
          /[xy]/g,
          function(c) {
            let r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c == "x" ? r : (r & 0x7) | 0x8).toString(16);
          }
      );
      return uuid;
    }

  },
  watch: {
    content(val) {
      this.init();
    }
  }


}
</script>

<style lang="scss" scoped>
.QRCode {
  display: inline-block;
  position: relative;
  overflow: hidden;
  .QQMode {
    position: absolute;
    left: 0;
    bottom: 100%;
    right: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.45);
    transition: all 200ms ease-in-out;
    cursor: pointer;
    color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    font-weight: bolder;
    box-sizing: border-box;
    padding: 10px;
  }
}
.QRCode:hover .QQMode {
  bottom: 0;
  height: 100%;
}
 .el-dialog__header {
  text-align: center;
}

#qrCodeUrl  img {
  margin: 0 auto;
}
.qrCodeUrlning{
  display: flex;align-items: center;justify-content: center;
}


</style>
·