pc_shop_site/components/DownloadDialog.vue

<template>
    <el-dialog :lock-scroll="false"
      title="Quote Created"
      :visible.sync="visible"
      width="500px"
      :before-close="handleClose"
      :show-close="false"
      center
      top="0">
      <div class="content">How would you like to receive the quote</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="handleDownload" :loading="downloading">DOWNLOAD</el-button>
        <el-button type="danger" @click="handleSend">SEND MAIL</el-button>
        <el-button type="danger" @click="handleClose" plain>CANCEL</el-button>
      </div>
    </el-dialog>
</template>

<script>
import Bus from "@/plugins/bus.js";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      downloading:false
    }
  },
  mounted(){
    Bus.$on("finishDownload", data=> {this.downloading=false;})
  },
  beforeDestroy(){
       // 取消监听
      Bus.$off("finishDownload")
    },
  methods: {
    handleDownload() {
      this.downloading=true;
      Bus.$emit("sendDownload");
    },
    
    handleSend() {
      this.$emit("handleSend");
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  text-align: center;
}
</style>