pptList/src/views/Editor/ExportDialog/ExportPPTX.vue

<template>
  <div class="export-pptx-dialog">
    <div class="btns">
      <Button class="btn export" type="primary" @click="exportPPTX()">导出 PPTX</Button>
      <Button class="btn close" @click="emit('close')">关闭</Button>
    </div>

    <FullscreenSpin :loading="exporting" tip="正在导出..." />
  </div>
</template>

<script lang="ts" setup>
import useExport from "@/hooks/useExport"

import FullscreenSpin from "@/components/FullscreenSpin.vue"
import Button from "@/components/Button.vue"

const emit = defineEmits<{
  (event: "close"): void
}>()

const { exportPPTX, exporting } = useExport()
</script>

<style lang="scss" scoped>
.export-pptx-dialog {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.btns {
  width: 300px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;

  .export {
    flex: 1;
  }
  .close {
    width: 100px;
    margin-left: 10px;
  }
}
</style>