el-dialog拖拽、拉伸

el-dialog是Element UI中的一个组件，用于创建对话框。要实现el-dialog的拖拽和拉伸功能，可以使用自定义指令el-drag-dialog。

以下是一个示例代码，演示了如何使用el-dialog和el-drag-dialog实现拖拽和拉伸功能：

<template>
  <div>
    <el-dialog v-el-drag-dialog :visible.sync="dialogVisible" title="对话框" :width="dialogWidth">
      <p>这是一个对话框</p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogWidth: '50%'
    };
  },
  directives: {
    'el-drag-dialog': {
      bind(el, binding, vnode) {
        el.style.cursor = 'move';
        el.onmousedown = (e) => {
          const dialogHeaderEl = el.querySelector('.el-dialog__header');
          const dragDom = vnode.componentInstance.$el.querySelector('.el-dialog');

          const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);

          const disX = e.clientX - dialogHeaderEl.offsetLeft;
          const disY = e.clientY - dialogHeaderEl.offsetTop;

          const screenWidth = document.body.clientWidth;
          const screenHeight = document.documentElement.clientHeight;

          const dragDomWidth = dragDom.offsetWidth;
          const dragDomheight = dragDom.offsetHeight;

          const minDragDomLeft = dragDom.offsetLeft;
          const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;

          const minDragDomTop = dragDom.offsetTop;
          const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;

          let styL = sty.left;
          let styT = sty.top;

          document.onmousemove = function (e) {
            let left = e.clientX - disX;
            let top = e.clientY - disY;

            if (-(left) > minDragDomLeft) {
              left = -(minDragDomLeft);
            } else if (left > maxDragDomLeft) {
              left = maxDragDomLeft;
            }

            if (-(top) > minDragDomTop) {
              top = -(minDragDomTop);
            } else if (top > maxDragDomTop) {
              top = maxDragDomTop;
            }

            dragDom.style.left = `${left + parseInt(styL, 10)}px`;
            dragDom.style.top = `${top + parseInt(styT, 10)}px`;
          };

          document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  }
};
</script>

在上述代码中，我们使用了自定义指令el-drag-dialog来实现拖拽功能。通过绑定该指令到el-dialog的元素上，我们可以通过鼠标按下、移动和释放的事件来实现对话框的拖拽。

同时，我们还可以通过设置dialogWidth的值来控制对话框的宽度，从而实现拉伸功能。

请注意，上述代码是一个Vue组件，需要在Vue项目中使用。确保已经引入了Element UI库。