eep_page/src/views/book/courseware/preview/components/input/InputPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="input-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main" :style="getMainStyle()">
      <span class="rich-text" v-html="convertText(sanitizeHTML(data.content))"></span>
      <el-input
        ref="input"
        v-model="data.answer.text"
        type="text"
        :style="{
          cursor: disabled ? 'not-allowed' : 'pointer',
          font: data.property.font,
          fontSize: data.property.font_size + 'px',
          color: data.property.text_color,
        }"
        :disabled="disabled"
        :class="[
          'input',
          { 'input-horizontal': data.property.input_style === inputStyleList[0].value },
          `input-${data.property.text_align}`,
        ]"
        @change="onInputChange"
      />
      <div v-show="showLang" class="lang">
        {{ data.multilingual.find((item) => item.type === getLang())?.translation }}
      </div>
    </div>

    <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" />
    <AnswerCorrect
      :answer-correct="data?.answer_correct"
      :visible.sync="visibleAnswerCorrect"
      @closeAnswerCorrect="closeAnswerCorrect"
    />
    <AnswerAnalysis
      :visible.sync="visibleAnswerAnalysis"
      :answer-list="data.answer_list"
      :analysis-list="data.analysis_list"
      @closeAnswerAnalysis="closeAnswerAnalysis"
    />
  </div>
</template>

<script>
import { getInputData, inputStyleList } from '@/views/book/courseware/data/input';
import { addTone, handleToneValue } from '@/utils/common';

import PreviewMixin from '../common/PreviewMixin';

export default {
  name: 'InputPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      data: getInputData(),
      inputStyleList,
    };
  },
  watch: {
    'data.answer.text'(newVal) {
      this.answer.text = newVal;
    },
    answer(newVal) {
      this.data.answer.text = newVal?.text || '';
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.input.$el.querySelector('.el-input__inner').style.backgroundColor =
        this.data.property.background_color;
    });
  },
  methods: {
    // 输入后输入框根据property属性，更新内容
    onInputChange() {
      if (!this.data.property.is_enable_pinyin) {
        return;
      }

      let answer = this.data.answer.text;
      // 句首大写
      if (this.data.property.is_enable_sentence_case) {
        answer = answer.charAt(0).toUpperCase() + answer.slice(1);
      }

      // 自动修正为拼音
      if (this.data.property.is_enable_auto_correct) {
        answer = answer
          .trim()
          .split(/\s+/)
          .map((item) => {
            return handleToneValue(item);
          })
          .map((item) =>
            item.map(({ number, con }) => (number && con ? addTone(Number(number), con) : number || con || '')),
          )
          .filter((item) => item.length > 0)
          .join(' ');
      }
      this.data.answer.text = answer;
    },
    getMainStyle() {
      return {
        gridTemplateAreas: this.showLang ? "'rich input' 'lang lang'" : "'rich input'",
      };
    },
    retry() {
      this.data.answer.text = '';
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.input-preview {
  @include preview-base;

  .main {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px;
    align-items: center;

    .rich-text {
      grid-area: rich;

      :deep p {
        word-break: keep-all;
      }
    }

    .input {
      grid-area: input;
    }

    .input.input-horizontal :deep .el-input__inner {
      background-color: #fff;
      border-top-width: 0;
      border-right-width: 0;
      border-bottom: 1px solid #333;
      border-left-width: 0;
      border-radius: 0;
    }

    .input.input-left :deep .el-input__inner {
      text-align: left;
    }

    .input.input-center :deep .el-input__inner {
      text-align: center;
    }

    .input.input-right :deep .el-input__inner {
      text-align: right;
    }

    .input :deep .el-input__inner {
      color: currentColor;
    }
  }
}
</style>