hair/src/views/ActionSheet.vue

<template>
  <div class="actionSheet">
    <img :src="url" alt="" @click="md" class="qr" />
  </div>
</template>

<script>
// @ is an alias to /src
// let sT = 0;

export default {
  name: "Applyreal",
  data() {
    return {
      //   url: "http://192.168.31.196:8080/qr.png",
      url: "http://djweb.smcic.net/img/qr.png",
      load: {},
    };
  },
  mounted() {
    document.title = "车险";
  },
  computed: {},
  methods: {
    md() {
      console.log("---");
      //   this.download({
      //     savePath: this.url,
      //   });
      this.downimg(this.url);
    },
    downimg(url) {
      let img = new Image();
      img.src = url;
      img.onload = function (ev) {
          console.log(ev)

        // 组装a标签
        // let elink = document.createElement("a");
        // // 设置下载文件名
        // elink.download = Date.now() + ".png";
        // elink.style.display = "none";
        // elink.href = URL.createObjectURL(this.response);
        // document.body.appendChild(elink);
        // elink.click();
        // document.body.removeChild(elink);
      };
    },

    download(row) {
      // download
      this.load[row.savePath] = true;
      let xhttp,
        that = this;
      if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
      else xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
      xhttp.responseType = "blob";
      xhttp.open("GET", row.savePath, true);
      console.log(xhttp);
      xhttp.send();
      xhttp.addEventListener(
        "progress",
        res => {
          console.log(res, (res.loaded / res.total) * 100);
          that.load[row.savePath] =
            ((res.loaded / res.total) * 100).toFixed(0) - 0;
        },
        false
      );
      xhttp.onreadystatechange = function () {
        if (this.readyState != 4 || this.status != 200) return;
        // 组装a标签
        let elink = document.createElement("a");
        // 设置下载文件名
        elink.download = Date.now() + ".png";
        elink.style.display = "none";
        elink.href = URL.createObjectURL(this.response);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
        delete that.load[row.savePath];
      };
    },
  },
  beforeUnmount: function () {},
  components: {},
};
</script>

<style>
.actionSheet {
  background-image: url("http://djweb.smcic.net/img/cx.png");
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  position: relative;
}
.actionSheet .qr {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-60%);
}
</style>