eep_page/src/views/book/courseware/create/components/common/WordProofread.vue

<template>
  <span class="word-proofread-wrapper">
    <el-button class="btn" :style="buttonStyle" @click.native="showWordFlag = true">{{ buttonText }}</el-button>
    <el-dialog
      v-if="showWordFlag"
      :visible.sync="showWordFlag"
      :show-close="true"
      :close-on-click-modal="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :lock-scroll="true"
      width="80%"
      class="practiceBox"
    >
      <CheckWord :data="safeWordData" @saveWord="handleSaveWord" />
    </el-dialog>
  </span>
</template>

<script>
import CheckWord from '@/views/book/courseware/create/components/base/common/CheckWord.vue';

export default {
  name: 'WordProofread',
  components: {
    CheckWord,
  },
  props: {
    wordData: {
      type: Object,
      default: () => ({ detail: [] }),
    },
    buttonText: {
      type: String,
      default: '分词校对',
    },
    buttonStyle: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      showWordFlag: false,
    };
  },
  computed: {
    safeWordData() {
      if (!this.wordData || !Array.isArray(this.wordData.detail)) {
        return { detail: [] };
      }
      return this.wordData;
    },
  },
  methods: {
    handleSaveWord(saveArr) {
      this.$emit('save', saveArr);
      this.showWordFlag = false;
    },
  },
};
</script>