根据后端svg的宽高决定浮层的宽高

在这里插入图片描述

<ul style="position: relative">
  <li
    class="refresh_code d-flex align-center justify-center"
    :style="{ width: `${svgWidth}px`, height: `${svgHeight}px` }"
    v-if="needRefresh"
  >
    <div class="text-center">
      <v-icon size="60" color="#F5A623">mdi-alert-circle</v-icon>
      <p class="text-center text-button mt-2">
        二维码已过期
        <span
          @click="toRefresh"
          class="blue--text"
          style="cursor: pointer"
          >刷新</span
        >
      </p>
    </div>
  </li>
  <li id="wechat_qrcode" ref="wechat_qrcode"></li>
</ul>

data() {
    return {
      validTime: 45,
      refreshTimer: null,
      needRefresh: false,
      svgWidth: "",
      svgHeight: "",
    };
  },
  mounted() {
    this.fetchclientqrcode();
    this.isVaild();
  },
  methods: {
    fetchclientqrcode() {
      return this.$http
        .get(`/api/qrcode`)
        .delegateTo(api_request)
        .then((res) => {
          this.$nextTick(() => {
            this.$refs.wechat_qrcode.innerHTML = res.qrcode;
            const svg = document.getElementsByClassName("pyqrcode")[0];
            const svgWidth = svg.getAttribute("width");
            const svgHeight = svg.getAttribute("height");
            this.svgWidth = svgWidth;
            this.svgHeight = svgHeight;
          });
        })
        .catch(({ code, message }) => {
          throw `获取数据失败:${this.$t("api." + code)}, 额外信息: ${this.$t(
            "api." + typeof message === "string"
              ? message
              : JSON.stringify(message)
          )}`;
        })
        .delegateTo(this.$snackbar.delegateError);
    },
    toRefresh() {
      this.needRefresh = false;
      this.fetchclientqrcode();
      this.isVaild();
    },
    isVaild() {
      this.refreshTimer = setInterval(() => {
        if (this.validTime > 0) {
          this.validTime = this.validTime - 1;
        } else {
          clearInterval(this.refreshTimer);
          this.needRefresh = true;
          this.validTime = 45;
        }
      }, 1000);
    },
 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值