eep_page/src/views/book/courseware/create/components/common/ModuleBase.vue

<template>
  <div class="module-wrapper" @click="clickWrapper">
    <div
      class="horizontal-line top"
      :style="{ backgroundColor: lineColor }"
      @mousedown="dragStart($event, 'ns-resize', 'top')"
    ></div>
    <div
      class="vertical-line left"
      :style="{ backgroundColor: lineColor }"
      @mousedown="dragStart($event, 'ew-resize', 'left')"
    ></div>

    <div :class="['module', { active: getCurSettingId() === id }]" draggable="false">
      <div class="module-top">
        <span class="title" @mousedown="dragComponentStart($event)">{{ componentNameList[type] }}</span>
        <div class="module-icon">
          <el-checkbox v-model="checked" />
          <i class="el-icon-rank" style="cursor: pointer" @mousedown="dragComponentStart($event)"></i>
          <span><SvgIcon icon-class="copy" size="10" @click="copyComponent" /></span>
          <span :class="[{ active: getCurSettingId() === id }]" @click="showSetting">
            <SvgIcon icon-class="setup" size="10" />
          </span>
          <span @click="deleteComponent"><SvgIcon icon-class="delete" size="10" /></span>
        </div>
      </div>
      <div class="module-content">
        <slot name="content"></slot>
      </div>
    </div>

    <div
      class="vertical-line right"
      :style="{ backgroundColor: lineColor }"
      @mousedown="dragStart($event, 'ew-resize', 'right')"
    ></div>
    <div
      class="horizontal-line bottom"
      :style="{ backgroundColor: lineColor }"
      @mousedown="dragStart($event, 'ns-resize', 'bottom')"
    ></div>
  </div>
</template>

<script>
import { componentNameList } from '@/views/book/courseware/data/bookType.js';

export default {
  name: 'ModuleBase',
  inject: [
    'id',
    'showSetting',
    'getCurSettingId',
    'deleteComponent',
    'handleComponentMove',
    'borderColor',
    'copyComponent',
    'moveComponentDragStart',
  ],
  props: {
    type: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      componentNameList,
      drag: {
        dragging: false,
        startX: 0,
        startY: 0,
        type: '',
      },
      activeBgColor: '#82b4ff',
      checked: false,
    };
  },
  computed: {
    lineColor() {
      return this.id === this.getCurSettingId() ? this.activeBgColor : this.borderColor.value;
    },
  },
  created() {
    document.addEventListener('mousemove', this.dragMove);
    document.addEventListener('mouseup', this.dragEnd);
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.dragMove);
    document.removeEventListener('mouseup', this.dragEnd);
  },
  methods: {
    /**
     * 拖拽开始
     * @param {MouseEvent} event
     * @param {string} cursor
     * @param {string} type
     */
    dragStart(event, cursor, type) {
      const { clientX, clientY } = event;
      this.drag = {
        dragging: true,
        startX: clientX,
        startY: clientY,
        type,
      };

      document.body.style.cursor = cursor;
    },
    /**
     * 拖拽移动
     * @param {MouseEvent} event
     */
    dragMove(event) {
      if (!this.drag.dragging) return;

      const { clientX, clientY } = event;
      const { startX, startY, type } = this.drag;
      const offsetX = clientX - startX;
      const offsetY = clientY - startY;

      this.handleComponentMove({ type, offsetX, offsetY });

      this.drag.startX = clientX;
      this.drag.startY = clientY;
    },
    /**
     * 拖拽结束
     */
    dragEnd() {
      this.drag = {
        dragging: false,
        startX: 0,
        startY: 0,
        type: '',
      };

      document.body.style.cursor = 'auto';
    },
    /**
     * 拖拽组件移动开始
     * @param {MouseEvent} event 鼠标事件
     */
    dragComponentStart(event) {
      event.stopPropagation();
      this.moveComponentDragStart(event, 'component', { id: this.id });
    },
    clickWrapper() {
      this.showSetting();
    },
  },
};
</script>

<style lang="scss" scoped>
.module-wrapper {
  display: grid;
  grid-template:
    'top top top' 1px
    'left module right' auto
    'bottom bottom bottom' 1px
    / 1px auto 1px;

  .horizontal-line {
    width: 100%;
    cursor: ns-resize;

    &.top {
      grid-area: top;
    }

    &.bottom {
      grid-area: bottom;
    }
  }

  .vertical-line {
    cursor: ew-resize;

    &.left {
      grid-area: left;
    }

    &.right {
      grid-area: right;
    }
  }

  .module {
    grid-area: module;
    padding: 8px;
    overflow: auto;
    background-color: #fff;

    &.active {
      box-shadow: 0 0 0 3px #82b4ff;
    }

    &-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 3px;

      .title {
        font-size: 12px;
        color: $label-color;
        cursor: move;
      }
    }

    &-icon {
      display: flex;
      column-gap: 8px;

      .el-checkbox {
        line-height: 16px;

        :deep .el-checkbox__inner {
          width: 12px;
          height: 12px;
        }
      }

      span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        cursor: pointer;
        background-color: #fff;
        border-radius: 20px;

        &.active {
          background-color: #c9c9c9;
        }

        .svg-icon.setup {
          color: #000;
        }

        .svg-icon.delete {
          color: #ed4646;
        }
      }
    }

    &-content {
      position: relative;
      padding: 8px;
      background-color: #fff;

      .option-list {
        .rich-wrapper {
          flex: 1;
          min-height: 32px;

          :deep .rich-text {
            &.mce-content-body {
              padding-top: 4px;
            }

            &:not(.mce-edit-focus) {
              p {
                margin: 0;
              }
            }

            &.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
              top: 6px;
            }
          }
        }
      }
    }
  }
}
</style>