drawing-board-service/src/example/components/container/container.vue

<template>
  <div class="layout" :class="{ full }">
    <slot name="header" class="header" v-if="draw" :draw="draw" />
    <div class="container">
      <slot name="slide" class="slide" v-if="draw" :draw="draw" />
      <div class="content" ref="drawEle">
        <DrawBoard v-if="drawEle" :handler-resource="uploadResourse" ref="draw" />
        <slot name="cover" v-if="draw" :draw="draw" />
      </div>

      <div class="confirm-items">
        <ElButton
          @click="draw.quitDrawShape()"
          circle
          class="h-bottom"
          v-if="draw?.drawing"
        >
          <template #icon>
            <icon name="pic_yes" size="32px" color="#41c732" />
          </template>
        </ElButton>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onUnmounted, ref, watch } from "vue";
import { DrawBoard } from "@/index";
import { listener } from "@/utils/event.ts";
import { ElMessage, ElButton } from "element-plus";
import { mergeFuns, startAnimation } from "@/utils/shared";
import { installDraw } from "./use-draw";

const props = defineProps<{
  full: boolean;
  uploadResourse: (file: File) => Promise<string>;
}>();

const emit = defineEmits<{ (e: "update:full", full: boolean): void }>();

const drawEle = ref<HTMLDivElement | null>(null);
const draw = installDraw(ref());

watch(
  () => props.full,
  (_f1, _f2, onCleanup) => {
    const hideMsg =
      props.full &&
      ElMessage.warning({
        message: "按ESC键可退出全屏模式",
        duration: 3000,
      });

    const stopAnimation = startAnimation(() => {
      draw.value?.updateSize();
    }, 400);

    onCleanup(mergeFuns([() => hideMsg && hideMsg.close(), stopAnimation]));
  }
);

onUnmounted(
  listener(document.documentElement, "keyup", (ev) => {
    if (ev.key === "Escape") {
      emit("update:full", false);
    }
  })
);

defineExpose({
  get draw() {
    return draw.value;
  },
});
</script>

<style lang="scss" scoped>
@use '../../styles/global';

.layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100vh;
  background: #f0f2f5;
  --top: 0px;
  --left: 0px;
  overflow: hidden;

  .container {
    height: calc(100vh - #{global.$headerSize} - var(--top));
    display: flex;
    align-items: stretch;
  }

  .content {
    position: relative;
    width: calc(100% - 70px - var(--left));
  }
  &.full {
    --top: calc(-1 * #{global.$headerSize});
    --left: calc(-1 * #{global.$slideSize});
  }
}

.confirm-items {
  position: absolute;
  bottom: #{global.$bottomSize};
  left: 50%;
  transform: translateX(-50%);
}

.h-bottom {
  width: 64px;
  height: 64px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
}
</style>