drawing-board-service/src/example/fuse/views/home.vue

<template>
  <div class="layout" :class="{ full }">
    <Header class="header" v-if="draw" @full="fullHandler" @save="saveHandler" />
    <div class="container">
      <Slide class="slide" v-if="draw" />
      <div class="content" ref="drawEle">
        <DrawBoard
          id="asd"
          v-if="drawEle"
          :ref="(e: any) => draw = e.draw"
          :data="(data as any)"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Header from "./header/header.vue";
import Slide from "./slide/slide.vue";
import { onUnmounted, ref, watch, watchEffect } from "vue";
import { DrawExpose, DrawBoard } from "@/index";
import { data, save } from "./init.ts";
import { installDraw } from "./use-draw.ts";
import { listener } from "@/utils/event.ts";
import { ElMessage } from "element-plus";
import { startAnimation } from "@/utils/shared.ts";

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

const saveHandler = () => {
  save(draw.value?.getData());
};

const full = ref(false);
watch(full, (_f1, _f2, onCleanup) => {
  onCleanup(
    startAnimation(() => {
      draw.value?.updateSize();
    }, 400)
  );
});
const fullHandler = () => {
  full.value = true;
  ElMessage.warning({ message: "按ESC键可退出全屏模式", duration: 3000 });
};
onUnmounted(
  listener(document.documentElement, "keyup", (ev) => {
    if (ev.key === "Escape") {
      full.value = false;
    }
  })
);
</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;

  .header {
    margin-top: var(--top);
    transition: margin-top 0.3s ease;
    height: global.$headerSize;
    flex: 0 0 auto;
  }

  .container {
    flex: 1;
    display: flex;
    align-items: stretch;
  }

  .slide {
    flex: 0 0 auto;
    width: global.$slideSize;
    margin-left: var(--left);
    overflow-y: auto;
    background: #fff;
    transition: margin-left 0.3s ease;
  }

  .content {
    flex: 1;
  }

  &.full {
    --top: calc(-1 * #{global.$headerSize});
    --left: calc(-1 * #{global.$slideSize});
  }
}
</style>