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 class="text" title="点击校对拼音" @click="correctPinyin1(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,
    },
  },
  data() {
    return {
      paragraph_list: [],
      visible: false,
      selectContent: '',
      paragraph_index: 0,
      sentence_index: 0,
      word_index: 0,
    };
  },
  methods: {
    // 校对拼音
    correctPinyin1(text, i, j, k) {
      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',
        this.selectContent,
        tonePinyin,
        this.paragraph_index,
        this.sentence_index,
        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-size: 12px;
        }

        .text {
          cursor: pointer;
        }
      }
    }
  }
}
</style>