eep_page/src/components/PinyinText.vue

<template>
  <div class="pinyin-area">
    <div v-for="(paragraph, i) in paragraphList" :key="i" class="pinyin-paragraph">
      <div
        v-for="(sentence, j) in paragraph"
        :key="j"
        class="pinyin-sentence"
        :style="{ 'align-items': pinyinPosition === 'top' ? 'flex-end' : 'flex-start' }"
      >
        <div v-for="(text, k) in sentence" :key="k" class="pinyin-text">
          <span v-if="pinyinPosition === 'top'" class="pinyin">
            {{ text.pinyin.replace(/\s+/g, '') }}
          </span>
          <span
            :style="{ cursor: isPreview ? '' : 'pointer' }"
            :title="isPreview ? '' : '点击校对拼音'"
            @click="correctPinyin(text.text, i, j, k)"
            >{{ text.text }}</span
          >
          <span v-if="pinyinPosition === 'bottom'" class="pinyin">{{ text.pinyin.replace(/\s+/g, '') }}</span>
        </div>
      </div>
    </div>

    <CorrectPinyin :visible.sync="visible" :select-content="selectContent" @fillTonePinyin="fillTonePinyin" />
  </div>
</template>
<script>
import CorrectPinyin from '@/views/book/courseware/create/components/base/common/CorrectPinyin.vue';
export default {
  name: 'PinyinText',
  components: {
    CorrectPinyin,
  },
  props: {
    paragraphList: {
      type: Array,
      required: true,
    },
    pinyinPosition: {
      type: String,
      required: true,
    },
    isPreview: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      paragraph_list: [],
      visible: false,
      selectContent: '',
      paragraph_index: 0,
      sentence_index: 0,
      word_index: 0,
    };
  },
  methods: {
    // 校对拼音
    correctPinyin(text, i, j, k) {
      if (this.isPreview) return; // 如果是预览模式，不操作
      if (text) {
        this.visible = true;
        this.selectContent = text;
        this.paragraph_index = i;
        this.sentence_index = j;
        this.word_index = k;
      }
    },
    // 回填校对后的拼音
    fillTonePinyin(tonePinyin) {
      this.$emit('fillCorrectPinyin', {
        selectContent: this.selectContent,
        tonePinyin,
        i: this.paragraph_index,
        j: this.sentence_index,
        k: this.word_index,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pinyin-area {
  .pinyin-paragraph {
    display: flex;
    flex-direction: column;

    .pinyin-sentence {
      display: flex;
      flex-wrap: wrap;
      column-gap: 4px;

      .pinyin-text {
        display: flex;
        flex-direction: column;
        font-size: 24px;

        .pinyin {
          font-family: 'League';
          font-size: 12px;
        }
      }
    }
  }
}
</style>