qimall/backend/views/components/common/com-qrcode.php

<template id="com-qrcode">
  <div class="qrcode" :style="{'width':width, 'height':height}" @mouseenter="onMouseOver()" @mouseleave="onMouseOut()">
    <canvas :id="canvasId" :style="{'width':width, 'height':height}"></canvas>
    <transition name="fade">
      <div v-show="isShow" class="qrcode-options">
        <span @click="download">下载</span>
        <span @click="copyContent(copyInfo ? copyInfo  : content)" class="qrcode-copy">复制</span>
      </div>
    </transition>

  </div>
</template>
<script src="<?= Yii::$app->request->baseUrl ?>/resources/js/lan.qrcode.js"></script>
<script src="/resources/unpkg/clipboard@1.5.12/dist/clipboard.min.js"></script>
<script>
  Vue.component("com-qrcode", {
    template: '#com-qrcode',
    props: {
      content: {
        type: String,
        default: function() {
          return 'this is a qrcode'
        }
      },
      width: {
        type: String,
        default: function() {
          return '160'
        }
      },
      height: {
        type: String,
        default: function() {
          return '160'
        }
      },
      downloadParam: { // 下载的参数
        type: Object,
        default () {
          return {
            width: 300,
            height: 300,
            name: "lan-qr-code" // 下载之后的文件名
          };
        }
      },
      copyInfo: {
        type: String,
        default: function() {
          return ''
        }
      },
    },
    data() {
      return {
        canvasId: "",
        isShow: false,
      }
    },
    created() {
      this.canvasId = this.getUUID();
      this.$nextTick(() => {
        this.init();
      });
    },
    methods: {
      init() {
        let width = this.width,
          height = this.height;
        LanQRCode.toCanvas(
          document.getElementById(this.canvasId),
          this.content, {
            width,
            height,
            toSJISFunc: LanQRCode.toSJIS
          },
          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;
      },

      // 下载二维码
      download() {
        const ele = document.createElement("canvas");
        ele.style.width = this.downloadParam.width || "300" + "px";
        ele.style.height = this.downloadParam.height || "300" + "px";
        LanQRCode.toCanvas(
          ele,
          this.content, {
            width: this.downloadParam.width || "300",
            height: this.downloadParam.height || "300",
            toSJISFunc: LanQRCode.toSJIS
          },
          error => {}
        );
        let [F, S, a] = [
          navigator.userAgent.indexOf("Firefox") > -1,
          ele.toDataURL("image/png"),
          document.createElement("a")
        ];
        [a.href, a.download] = [S, this.downloadParam.name];
        if (F) {
          let evt = document.createEvent("MouseEvents");
          evt.initEvent("click", true, true);
          a.dispatchEvent(evt);
        } else {
          a.click();
        }
      },
      // 鼠标移入
      onMouseOver() {
        this.isShow = true
      },
      // 鼠标移出
      onMouseOut() {
        this.isShow = false
      },
      copyContent(data) { //复制链接
        var clipboard = new ClipboardJS('.qrcode-copy', {
          text: function() {
            return data;
          }
        });

        clipboard.on('success', (e) => {
          this.$message.success('复制成功!');
          clipboard.destroy()
        });
        clipboard.on('error', (e) => {
          this.$message.error('复制失败!');
          this.clipboard.destroy()
        });
      },
    },
    watch: {
      content(val) {
        this.$nextTick(() => {
          this.init();
        });
      }
    }
  })
</script>
<style lang="scss" scoped>
  .qrcode {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
  }

  .qrcode .qrcode-options {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
    font-size: 13px;
    line-height: 30px;
    height: 30px;
    color: #FFFFFF;
  }

  .qrcode .qrcode-options span {
    width: 50%;
    cursor: pointer;
    background-color: #DCDFE6;
  }

  .qrcode .qrcode-options span:nth-of-type(1) {
    margin-right: 1px;
  }

  .qrcode .qrcode-options span:nth-of-type(2) {
    margin-left: 1px;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: .75s ease;
  }

  .fade-enter,
  .fade-leave-to {
    transform: translateY(30px)
  }

  .fade-enter-to,
  .fade-leave {
    transform: translateX(0);
  }
</style>