eep_page/src/components/ExplanatoryNoteDialog.vue

<template>
  <el-dialog
    :title="titleText === '气泡' ? titleText : '编辑' + titleText"
    :visible.sync="visible"
    width="680px"
    :modal="modal"
    :close-on-click-modal="false"
    @close="dialogClose()"
  >
    <RichText
      v-model="richData.dataStr"
      toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright image media link"
      :wordlimit-num="false"
      :height="240"
      :font-size="'14pt'"
      placeholder="输入内容"
      page-from="audit"
    />
    <template slot="footer">
      <el-button size="medium" @click="deleteNote">删除</el-button>
      <el-button type="primary" size="medium" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import RichText from './RichText';

export default {
  name: 'ExplanatoryNoteDialog',
  components: {
    RichText,
  },
  props: {
    open: {
      type: Boolean,
      default: false,
      required: true,
    },
    initData: {
      type: Object,
      default: () => ({}),
    },
    titleText: {
      type: String,
      default: '气泡',
    },
    modal: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      visible: false,
      richData: this.initData,
    };
  },
  watch: {
    open(newVal) {
      this.visible = newVal;
      this.richData = this.initData;
    },
    visible(newVal) {
      if (!newVal) {
        this.$emit('update:open', false);
        this.richData = {};
      }
    },
  },
  methods: {
    // 关闭弹窗，调用富文本组件中的
    dialogClose() {
      this.visible = false;
    },
    deleteNote() {
      this.$confirm(`确定要删除此条${this.titleText}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.visible = false;
          this.$emit('cancel');
        })
        .catch(() => {});
    },
    confirm() {
      this.$emit('confirm', this.richData);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dialog {
  :deep &__body {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    padding: 8px 8px 0;

    .el-textarea__inner {
      height: 108px;
    }
  }

  :deep &__footer {
    display: flex;
    padding: 8px;

    .el-button {
      flex: 1;
    }
  }
}
</style>