wanda-editer/src/views/editer.vue

<template>
  <div class="wandaEditer">
    <!-- 顶部工具栏 -->
    <div class="top_toolbar">
      <topToolbar></topToolbar>
    </div>
    <div class="content">
      <!-- 左侧工具栏 -->
      <div class="left_toolbar">
        <leftToolbar @toolActionClick="toolActionClick"></leftToolbar>
      </div>
      <!-- 绘制界面 -->
      <div class="baseEdit">
        <!-- <baseEditer ref="graphy"></baseEditer> -->
        <baseEditertest ref="graphy"></baseEditertest>
      </div>
      <!-- 右侧工具栏 -->
      <div class="right_toolbar">
        <rightToolbar></rightToolbar>
      </div>
    </div>
  </div>
</template>

<script>
import baseEditer from "@/components/baseEditer.vue";
import baseEditertest from "@/components/baseEditertest.vue";
import leftToolbar from "@/components/edit/left_toolbar.vue";
import topToolbar from "@/components/edit/top_toolbar.vue";
import rightToolbar from "@/components/edit/right_toolbar.vue";

export default {
  name: "wandaEditer",
  components: {
    baseEditer,
    baseEditertest,
    leftToolbar,
    topToolbar,
    rightToolbar
  },
  methods: {
    // 左侧工具栏 点击事件
    toolActionClick(name) {
      this.$refs.graphy.changeStatus(name);
    }
  }
};
</script>
<style lang="less" scoped>
.wandaEditer {
  width: 100%;
  height: 100%;
  .top_toolbar {
    width: 100%;
    height: 60px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
  }
  .content {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    position: relative;
    .baseEdit {
      flex: 1;
      // position: relative;
    }
    .right_toolbar {
      height: 100%;
      background: #fff;
    }
    .left_toolbar {
      position: absolute;
      left: 12px;
      top: 12px;
    }
  }
}
</style>