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

<template>
  <el-dialog
    :visible="visible"
    width="260px"
    top="38vh"
    :show-close="false"
    :close-on-click-modal="false"
    @close="dialogClose"
  >
    <el-input v-model="file.title" autocomplete="off" placeholder="标题" maxlength="20" :show-word-limit="true" />
    <el-input v-model="file.intro" type="textarea" placeholder="介绍" maxlength="200" :show-word-limit="true" />
    <template slot="footer">
      <el-button size="medium" @click="dialogClose">取消</el-button>
      <el-button type="primary" size="medium" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'FillDescribe',
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    fileData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      file: {
        title: '',
        intro: '',
      },
    };
  },
  watch: {
    fileData: {
      handler(val) {
        Object.assign(this.file, val);
      },
      deep: true,
    },
  },
  methods: {
    dialogClose() {
      this.$emit('update:visible', false);
    },
    confirm() {
      this.$emit('update:visible', false);
      this.$emit('fillDescribeToFile', this.file);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dialog {
  :deep &__header {
    padding: 0;
  }

  :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>