环境：

• vue:2.5.16
• element-ui:2.3.4

效果图：

缩小后的样子：

放大后的样子

问题：

el-dialog本身只支持标题栏右上角有关闭按钮，故需要使用slot="title" 重写覆盖原本的标题栏。

除了这个查询了下官方API文档，其他都是简单的逻辑代码而已。

组件代码：

<template>
  <div class="big-and-small-view">
    <el-dialog
      class="DialogClass"
      :width="dialogWidth"
      :visible.sync="isShowDialog"
    >
    <!-- 未最小化时的标题栏 -->
      <div
        v-show="!isMiniSize"
        slot="title"
        class="dialog-header"
      >
      <!-- 标题栏左侧标题文字 -->
        <div class="left-title">
          <span class="span">示例图</span>
        </div>
        <!-- 标题栏右侧缩小按钮和关闭按钮 -->
        <div class="icons">
          <i
            title="缩小"
            class="i el-icon-minus"
            style="font-size: 24px"
            @click="miniSize"
          ></i>
          <i
            title="关闭"
            class="i el-icon-close"
            style="font-size: 24px"
            @click="close"
          ></i>
        </div>
      </div>

    <!-- 最小化后的标题栏 -->
      <div
        v-show="isMiniSize"
        slot="title"
        class="dialog-header"
      >
      <!-- 标题栏左侧标题文字 -->
        <div class="left-title">
          <span class="span">示例图</span>
        </div>
        <!-- 标题栏右侧缩小按钮和关闭按钮 -->
        <div class="icons">
          <i
            title="放大"
            class="i el-icon-full-screen"
            style="font-size: 24px"
            @click="miniSize"
          ></i>
          <i
            title="关闭"
            class="i el-icon-close"
            style="font-size: 24px"
            @click="close"
          ></i>
        </div>
      </div>

      <!-- dialog中的主体内容 最小化的时候不显示 -->
      <div v-show="!isMiniSize">
      </div>

    </el-dialog>
  </div>
</template>
<script>

export default {
  data() {
    return {
      isMiniSize:false,//是否最小化了，默认为否
      dialogWidth:'37%',//动态设置dialog宽度
    }
  },
  methods: {
    // 放大或者缩小
    miniSize() {
      this.isMiniSize = !this.isMiniSize;
      if(this.isMiniSize){
        this.dialogWidth = '12%';
      }
      else{
        this.dialogWidth = '37%';
      }
    },
    // 关闭弹窗
    close() {
      //强制触发父组件的事件来关闭dialog
      this.$emit('closeDialog')
      /*
      父组件中调动如下：

      1.父组件调用子组件：
       <biaAngSmallDialog 
        :isShowDialog="isShowDialog" 
        @closeDialog="closeHandle">

       </push-data>

      2.父组件方法：
        closeHandle () {
            this.isShowDialog = false  // 控制取消和X按钮，关闭弹窗
        } 
      */
    },
  },
};
</script>
<style>
.big-and-small-view {
  overflow-y: scroll;
  position: relative;
}
/* 弹窗header相关样式 */
.DialogClass dialog-header {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  cursor: auto;
}
.DialogClass dialog-header .div{
  flex: 1;
}

.DialogClass .left-title{
  margin-top: 3px;
}

.DialogClass .left-title .span{
  text-align: left;
  font-size: 16px;
  color: #000000;
}

.DialogClass .icons{
  display: flex;
  justify-content: flex-end;
}

.DialogClass .icons .i{
  color: #000000;
  display: block;
  padding: 3px;
}

.DialogClass .icons .i:hover{
  background: #dcdfe6;
  cursor: pointer;
}
</style>