Question.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-21 11:00:14
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-01-11 16:44:43
 * @FilePath: /danger-manage-web/src/views/myLessons/components/Question.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="question flex">
    <div class="tips">{{ tipsArr[questionObj.topicType] }}</div>
    <div
      class="top"
      :class="{ flex: alignItemsCenter }"
      :style="{ alignItems: alignItemsCenter ? 'center' : '' }"
      ref="top"
    >
      <div class="text" ref="text">
        {{ questionObj.text }}
      </div>
      <div class="num">{{ nowQuestion + 1 }}</div>
    </div>
    <div class="middle">
      <div
        class="item flex"
        v-for="(item, index) in questionObj.question"
        :key="item + 'aas' + index"
      >
        <div class="letter">
          {{ letters[index] }}
        </div>
        <div class="">
          {{ item }}
        </div>
      </div>
    </div>

    <div class="bottom flex">
      <div class="change-wrapper flex">
        <div
          class="change"
          :class="{ active: letterActive.indexOf(index) >= 0 }"
          @click="changeLetter(index)"
          v-for="(item, index) in questionObj.question"
          :key="item + 'a' + index"
        >
          {{ letters[index] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const letters = [
  "A",
  "B",
  "C",
  "D",
  "E",
  "F",
  "G",
  "H",
  "I",
  "J",
  "K",
  "L",
  "M",
  "N",
  "O",
  "P",
  "Q",
  "R",
  "S",
  "T",
  "U",
  "V",
  "W",
  "X",
  "Y",
  "Z",
];
export default {
  name: "question",
  props: {
    questionObj: {
      type: Object,
      default: () => {
        return {
          text: "asdfasdf",
          question: [
            "沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师",
            "沙发斯蒂芬大师",
            "沙发斯蒂芬大师",
            "沙发斯蒂芬大师",
            "沙发斯蒂芬大师",
          ],
        };
      },
    },
    nowQuestion: {
      type: Number,
    },
    index: {
      type: Number,
    },
    // 从外面传进来的选项，选择过的才有，没选择过的没有
    selectLetter: {
      type: [String, Number, Array],
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      alignItemsCenter: false,
      // 如果传进来了，就是这个值，如果没有就是null，因为动画需要那个key的问题，会清空原始的盒子，所以要传一下值
      letterActive: this.selectLetter,
      letters,
      tipsArr: {
        1: "单选题",
        2: "多选题",
        3: "判断题",
      },
    };
  },
  mounted() {
    // console.log('123')
    // 每次都会更新，所以不需要watch 直接在这里面写 因为动画需要那个key的问题，会清空原始的盒子，所以要传一下值
    this.textCenter();
  },
  watch: {
    // 监听一下当前题目，调整一下位置
    // nowQuestion(value) {
    //   console.log('nowQuestion变化',value)
    //   this.$nextTick(() => {
    //     this.textCenter();
    //   });
    // },
  },
  methods: {
    textCenter() {
      let h1 = this.$refs.text?.offsetHeight;
      let h2 = this.$refs.top?.offsetHeight;
      // 如果text大于或者等于top，就出不居中，如果不小于top，就上下居中
      if (h2 <= h1) {
        this.alignItemsCenter = false;
      } else {
        this.alignItemsCenter = true;
      }
    },
    changeLetter(index) {
      this.letterActive = [index];
      this.$emit("changeLetter", this.letterActive);
      // this.$emit("changeLetter", this.letters[index]);
    },
  },
};
</script>
<style lang="scss" scoped>
.question {
  // position: absolute;
  // top: 0px;
  // display: inline-block;
  width: 100%;
  height: 370px;
  padding-bottom: 10px;
  border-bottom: 1px solid #bbbbbb;
  // background: red;
  flex-direction: column;
  position: relative;
  .tips {
    width: 80px;
    height: 24px;
    background: #1d84ff;
    font-size: 14px;
    color: #fff;
    position: absolute;
    top: -45px;
    left: 0px;
    text-align: center;
    line-height: 24px;
  }
  .top {
    background: #f9f9f9;
    height: 54px;
    padding: 0px 10px 0px 43px;
    overflow-wrap: anywhere;
    // align-items: center;
    overflow-y: auto;
    position: relative;
    .text {
      font-size: 14px;
      text-indent: 2em;
    }
    .num {
      position: absolute;
      left: 0;
      width: 48px;
      height: 48px;
      top: 4px;
      background: #1d84ff;
      border-radius: 50%;
      text-align: center;
      line-height: 48px;
      font-size: 18px;
      color: #ffffff;
    }
  }
  .middle {
    flex: 1;
    // background: blue;
    overflow-y: auto;
    padding-left: 43px;
    padding-right: 10px;
    margin-bottom: 15px;
    .item {
      padding-top: 38px;
      width: 100%;
      overflow-wrap: anywhere;
      font-size: 14px;
      color: #101010;
      .letter {
        padding: 2px;
        margin-right: 10px;
        box-sizing: border-box;
      }
    }
  }
  .bottom {
    max-height: 70px;
    // background: black;
    padding-left: 43px;
    padding-right: 10px;
    overflow-y: auto;
    .change-wrapper {
      width: 756px;
      flex-wrap: wrap;
      margin: 0 auto;
      .change {
        width: 90px;
        height: 30px;
        background: #e8f4ff;
        color: #101010;
        border: 1px solid #a3d3ff;
        line-height: 30px;
        text-align: center;
        margin: 0 9px 5px;
        border-radius: 4px;
        cursor: pointer;
        &.active {
          background: #1d84ff;
          color: #ffffff;
          border: 1px solid #a3d3ff;
        }
        &:hover {
          background: rgba(29, 132, 255, 0.5);
          color: #ffffff;
        }
      }
    }
  }
}
</style>