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="(item, k) in sentence" :key="k" class="pinyin-text">
          <span
            :class="{ active: visible && word_index == k }"
            :title="isPreview ? '' : '点击校对'"
            :style="{
              ...item.activeTextStyle,
              cursor: isPreview ? '' : 'pointer',
            }"
            @click="correctPinyin(item, i, j, k)"
          >
            <ruby
              v-for="(word, w) in item.text.split('')"
              :key="w"
              :style="{ 'ruby-position': pinyinPosition === 'top' ? 'over' : 'under' }"
              class="py-char"
              >{{ word
              }}<rt class="pinyin" :class="{ active: visible && word_index == k }">{{ item.pinyin.split(' ')[w] }}</rt>
            </ruby>
          </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(item, i, j, k) {
      if (this.isPreview) return; // 如果是预览模式，不操作
      if (item) {
        this.visible = true;
        this.selectContent = item;
        this.paragraph_index = i;
        this.sentence_index = j;
        this.word_index = k;
      }
    },
    // 回填校对后的拼音
    fillTonePinyin(dataContent) {
      this.$emit('fillCorrectPinyin', {
        selectContent: dataContent,
        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 {
        font-size: 24px;

        .py-char {
          ruby-align: center;
        }

        .pinyin {
          margin-bottom: 4px;
          font-family: 'League';
          font-size: 12px;
          color: $font-color;
        }
      }
    }
  }

  .active {
    color: rgb(242, 85, 90) !important;
  }
}
</style>

<style lang="scss">
.pinyin-area + .pinyin-area {
  margin-top: 4px;
}
</style>