eep_page/src/views/book/courseware/preview/common/PreviewOperation.vue

<template>
  <div ref="operation" class="operation" :class="{ 'is-wrapped': isWrapped }">
    <!-- 重做 -->
    <div v-show="permissionControl.can_answer" class="button retry" @click="retry()"></div>
    <!-- 判断对错 -->
    <div
      v-show="permissionControl.can_judge_correct && isShowAnswer"
      class="button correct"
      @click="judgeCorrect"
    ></div>
    <!-- 查看答案 -->
    <div
      v-show="permissionControl.can_show_answer && isShowAnswer"
      class="button answer"
      @click="showAnswerAnalysis()"
    ></div>
    <!-- 批改 -->
    <div v-show="permissionControl.can_correct" class="button remark" @click="openAnswerCorrect(false)"></div>
    <!-- 查看批改 -->
    <div v-show="permissionControl.can_check_correct" class="button view-remark" @click="openAnswerCorrect(true)"></div>
  </div>
</template>

<script>
export default {
  name: 'PreviewOperation',
  inject: ['getPermissionControl', 'openAnswerCorrect'],
  props: {
    // 是否显示答案按钮
    isShowAnswer: {
      type: Boolean,
      default: true,
    },
    // 是否显示重做按钮
    isShowRetry: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      isWrapped: false, // 操作按钮是否换行
      resizeObserver: null, // 监听操作按钮容器尺寸变化的 ResizeObserver 实例
    };
  },
  computed: {
    permissionControl() {
      return this.getPermissionControl();
    },
  },
  mounted() {
    this.updateWrapState();
    if (window.ResizeObserver) {
      this.resizeObserver = new ResizeObserver(() => {
        this.updateWrapState();
      });
      this.resizeObserver.observe(this.$refs.operation);
    }
  },
  updated() {
    this.updateWrapState();
  },
  beforeDestroy() {
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
      this.resizeObserver = null;
    }
  },
  methods: {
    updateWrapState() {
      this.$nextTick(() => {
        const container = this.$refs.operation;
        if (!container) {
          this.isWrapped = false;
          return;
        }

        const visibleButtons = Array.from(container.children).filter((el) => el.offsetParent !== null); // 获取所有可见的按钮元素
        if (visibleButtons.length <= 1) {
          this.isWrapped = false;
          return;
        }

        const firstLineTop = visibleButtons[0].offsetTop; // 获取第一行按钮的 offsetTop
        // 如果有按钮的 offsetTop 与第一行按钮的 offsetTop 不同，说明换行了
        this.isWrapped = visibleButtons.some((el) => Math.abs(el.offsetTop - firstLineTop) > 1);
      });
    },
    showAnswerAnalysis() {
      this.$emit('showAnswerAnalysis');
    },
    // 重做
    retry() {
      this.$emit('retry');
    },
    judgeCorrect() {
      this.$emit('judgeCorrect');
    },
  },
};
</script>

<style lang="scss" scoped>
.operation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;

  &.is-wrapped {
    justify-content: flex-start;
  }

  .button {
    width: 90px;
    height: 40px;
    cursor: pointer;
    border-radius: 5px;

    &.retry {
      background: url('@/assets/component/component-retry.png') no-repeat center;
    }

    &.correct {
      background: url('@/assets/component/component-correct.png') no-repeat center;
    }

    &.answer {
      background: url('@/assets/component/component-answer.png') no-repeat center;
    }

    &.remark {
      background: url('@/assets/component/component-remark.png') no-repeat center;
    }

    &.view-remark {
      background: url('@/assets/component/component-view-remark.png') no-repeat center;
    }
  }
}
</style>