利用vue和element-ui ，实现需求 el-dialog弹窗右上角关闭按钮左面新增一个减号缩小i标签，点击减小i标签 icon把弹窗缩小到只有一个放大i标签icon和一个关闭i标签icon的div，div的功能有三个：1div可以拖拽，2放大按钮可以还原弹窗大小，关闭按钮是把弹窗关闭。请用具体代码来实现

好的，以下是实现 el-dialog 弹窗缩小的具体代码：

首先，需要在 el-dialog 组件中新增一个减号缩小按钮和一个放大按钮，代码如下：

<el-dialog
  title="弹窗标题"
  :visible.sync="dialogVisible"
  :close-on-click-modal="false"
>
  <template v-slot:header>
    <div>
      <span>弹窗标题</span>
      <i class="el-icon-minus" @click="minimize"></i>
      <i class="el-icon-full-screen" @click="maximize"></i>
      <i class="el-icon-close" @click="close"></i>
    </div>
  </template>
  <div>弹窗内容</div>
</el-dialog>

在 header 插槽中新增了一个 div，其中包含了原来的标题、新增的减号缩小按钮、放大按钮和关闭按钮。

接下来，定义减号缩小按钮的点击事件 minimize，代码如下：

methods: {
  minimize() {
    this.dialogVisible = false; // 关闭弹窗
    this.minimized = true; // 标记弹窗已经被缩小
  },
  // ...
}

其中，dialogVisible 是控制 el-dialog 是否可见的变量，minimized 是标记弹窗是否被缩小的变量。

接着，定义放大按钮的点击事件 maximize，代码如下：

maximize() {
  this.minimized = false; // 标记弹窗已经被放大
  this.dialogVisible = true; // 打开弹窗
}

当弹窗被缩小时，点击放大按钮即可将弹窗还原为原来的大小。

最后，实现弹窗的拖拽功能。可以使用 vue-draggable-resizable 插件来实现，代码如下：

<draggable-resizable
  :active="minimized"
  :w="300"
  :h="200"
  :x="100"
  :y="100"
  :min-w="200"
  :min-h="150"
  :parent="true"
  :snap-to-grid="true"
  :grid="[10, 10]"
  :z="1"
  :move-axis="['x', 'y']"
  :resize-dimensions="{x: true, y: true, w: true, h: true}"
  @dragging="onDragging"
  @resizing="onResizing"
>
  <div>
    <i class="el-icon-full-screen" @click="maximize"></i>
    <i class="el-icon-close" @click="close"></i>
  </div>
</draggable-resizable>

其中，draggable-resizable 是包含拖拽和缩放功能的容器组件，active 属性表示是否激活拖拽和缩放功能，w 和 h 属性表示容器的初始宽度和高度，x 和 y 属性表示容器的初始位置，min-w 和 min-h 属性表示容器的最小宽度和高度，parent 属性表示容器的父元素，snap-to-grid 属性表示是否吸附到网格，grid 属性表示网格大小，z 属性表示容器的 z-index 值，move-axis 属性表示容器可拖拽的方向，resize-dimensions 属性表示容器可缩放的方向。

需要在 methods 中定义 onDragging 和 onResizing 方法，用来处理拖拽和缩放事件。

完整代码如下：

<template>
  <draggable-resizable
    :active="minimized"
    :w="300"
    :h="200"
    :x="100"
    :y="100"
    :min-w="200"
    :min-h="150"
    :parent="true"
    :snap-to-grid="true"
    :grid="[10, 10]"
    :z="1"
    :move-axis="['x', 'y']"
    :resize-dimensions="{x: true, y: true, w: true, h: true}"
    @dragging="onDragging"
    @resizing="onResizing"
  >
    <div>
      <i class="el-icon-full-screen" @click="maximize"></i>
      <i class="el-icon-close" @click="close"></i>
    </div>
  </draggable-resizable>
</template>

<script>
import DraggableResizable from 'vue-draggable-resizable';

export default {
  components: {
    DraggableResizable,
  },
  data() {
    return {
      dialogVisible: true,
      minimized: false,
    };
  },
  methods: {
    minimize() {
      this.dialogVisible = false; // 关闭弹窗
      this.minimized = true; // 标记弹窗已经被缩小
    },
    maximize() {
      this.minimized = false; // 标记弹窗已经被放大
      this.dialogVisible = true; // 打开弹窗
    },
    close() {
      this.dialogVisible = false;
    },
    onDragging() {
      // 拖拽事件处理
    },
    onResizing() {
      // 缩放事件处理
    },
  },
};
</script>

<style>
/* 样式可以根据实际需求进行调整 */
.draggable-resizable {
  position: absolute;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: move;
}
.draggable-resizable div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  background-color: #f0f0f0;
}
.draggable-resizable i {
  cursor: pointer;
  font-size: 16px;
}
</style>