Vue2+ElementUI 弹窗全局拖拽 支持放大缩小

在Vue2和ElementUI中创建一个支持拖拽和放大缩小的全局弹窗，你可以使用vue-draggable-resizable组件。首先安装该组件：

npm install vue-draggable-resizable --save

然后在全局范围内注册组件，并创建一个弹窗组件：

// main.js 或者其他的入口文件
import Vue from 'vue';
import VueDraggableResizable from 'vue-draggable-resizable';
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
 
Vue.component('vue-draggable-resizable', VueDraggableResizable);
 
// 弹窗组件
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :show-close="true"
    :width="width"
    :height="height"
    @dragging="onDrag"
    @resizing="onResize"
  >
    <vue-draggable-resizable
      :w="width"
      :h="height"
      @dragging="onDrag"
      @resizing="onResize"
    >
      <!-- 弹窗内容 -->
    </vue-draggable-resizable>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: true,
      width: 300,
      height: 200
    };
  },
  methods: {
    onDrag(x, y) {
      // 拖动时的处理逻辑
    },
    onResize(newX, newY, originalX, originalY) {
      // 更新宽度和高度
      this.width = newX;
      this.height = newY;
    }
  },
  components: {
    VueDraggableResizable
  }
};
</script>

这个组件包含了一个el-dialog用于显示背景遮罩和关闭按钮，以及vue-draggable-resizable组件用于实现拖拽和放大缩小功能。在vue-draggable-resizable组件上设置了宽度和高度，并监听了dragging和resizing事件以便更新组件的位置和尺寸。