element-ui 中改变dialog 可拉伸放大缩小

element-ui 中的 dialog 组件似乎没有直接提供可拉伸放大缩小的功能，但是可以通过以下方法实现：

1. 通过设置 `resizable` 属性为 `true`，使得 dialog 可以被拖动改变大小。
2. 在 dialog 中添加一个可以拖动改变大小的元素，比如一个 div，然后监听该元素的 `mousedown` 和 `mousemove` 事件，在鼠标移动时改变 dialog 的宽高。

以下是一个简单的示例代码：

<template>
  <el-dialog :resizable="true" :visible.sync="dialogVisible" title="可拉伸的对话框" :width="dialogWidth" :height="dialogHeight">
    <div class="resize-handle" @mousedown="onMouseDown"></div>
    <p>这是一个可拉伸的对话框。</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogWidth: '50%',
      dialogHeight: '50%',
      startX: 0,
      startY: 0,
      resizing: false,
    };
  },
  methods: {
    onMouseDown(event) {
      this.startX = event.clientX;
      this.startY = event.clientY;
      this.resizing = true;
      document.addEventListener('mousemove', this.onMouseMove);
      document.addEventListener('mouseup', this.onMouseUp);
    },
    onMouseMove(event) {
      if (this.resizing) {
        const deltaX = event.clientX - this.startX;
        const deltaY = event.clientY - this.startY;
        this.dialogWidth = `${parseInt(this.dialogWidth) + deltaX}px`;
        this.dialogHeight = `${parseInt(this.dialogHeight) + deltaY}px`;
        this.startX = event.clientX;
        this.startY = event.clientY;
      }
    },
    onMouseUp() {
      this.resizing = false;
      document.removeEventListener('mousemove', this.onMouseMove);
      document.removeEventListener('mouseup', this.onMouseUp);
    },
  },
};
</script>

<style>
.resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
}
</style>

在这个示例中，我们设置了 `resizable` 属性为 `true`，使得对话框可以被拖动改变大小。我们还在对话框中添加了一个 div 元素，作为可拉伸的元素。当用户在该元素上按下鼠标时，我们开始监听鼠标移动事件，并在移动过程中改变对话框的宽高。在鼠标抬起时，我们停止监听事件。最后，我们通过样式将该元素设置为右下角的三角形，表示可以拖动改变大小。