使用vue和element-ui 实现：页面有4个el-tab和一个弹窗，4个el-tab写假数据，然后弹窗实现三个功能：1可以拖拽；2可以边框和四角实现放大和缩；3点击4个el-tab不影响他。

好的，以下是一个简单的实现示例：

1. 新建一个Vue组件，命名为"TabAndDialog"，包含4个el-tab和一个弹出框：

<template>
  <div class="tab-and-dialog-container">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="Tab 1">Tab 1 Content</el-tab-pane>
      <el-tab-pane label="Tab 2">Tab 2 Content</el-tab-pane>
      <el-tab-pane label="Tab 3">Tab 3 Content</el-tab-pane>
      <el-tab-pane label="Tab 4">Tab 4 Content</el-tab-pane>
    </el-tabs>
    <el-dialog
      title="弹窗标题"
      :visible.sync="dialogVisible"
      :custom-class="'my-dialog'"
      :style="{position: 'fixed', top: dialogTop + 'px', left: dialogLeft + 'px', width: dialogWidth + 'px', height: dialogHeight + 'px', zIndex: dialogZIndex}"
      @mousedown.native="startDrag"
    >
      <div class="dialog-content">
        // 在这里添加您自己的内容
      </div>
      <div class="resize-handle" @mousedown="startResize"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'Tab 1',
      dialogVisible: false,
      dialogTop: 100,
      dialogLeft: 100,
      dialogWidth: 400,
      dialogHeight: 300,
      dialogZIndex: 1000,
      isDragging: false,
      dragStartX: 0,
      dragStartY: 0,
      isResizing: false,
      resizeStartX: 0,
      resizeStartY: 0,
      resizeStartWidth: 0,
      resizeStartHeight: 0,
    }
  },
  methods: {
    startDrag(event) {
      // 防止鼠标右键拖拽
      if (event.button === 2) {
        return;
      }
      this.isDragging = true;
      this.dragStartX = event.clientX;
      this.dragStartY = event.clientY;
      document.addEventListener('mousemove', this.drag);
      document.addEventListener('mouseup', this.endDrag);
    },
    drag(event) {
      if (!this.isDragging) {
        return;
      }
      const deltaX = event.clientX - this.dragStartX;
      const deltaY = event.clientY - this.dragStartY;
      this.dialogTop += deltaY;
      this.dialogLeft += deltaX;
      this.dragStartX = event.clientX;
      this.dragStartY = event.clientY;
    },
    endDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.drag);
      document.removeEventListener('mouseup', this.endDrag);
    },
    startResize(event) {
      // 防止鼠标右键拖拽
      if (event.button === 2) {
        return;
      }
      this.isResizing = true;
      this.resizeStartX = event.clientX;
      this.resizeStartY = event.clientY;
      const dialog = document.querySelector('.my-dialog');
      this.resizeStartWidth = dialog.offsetWidth;
      this.resizeStartHeight = dialog.offsetHeight;
      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.endResize);
    },
    resize(event) {
      if (!this.isResizing) {
        return;
      }
      const deltaX = event.clientX - this.resizeStartX;
      const deltaY = event.clientY - this.resizeStartY;
      const newWidth = this.resizeStartWidth + deltaX;
      const newHeight = this.resizeStartHeight + deltaY;
      this.dialogWidth = Math.max(newWidth, 200);
      this.dialogHeight = Math.max(newHeight, 150);
    },
    endResize() {
      this.isResizing = false;
      document.removeEventListener('mousemove', this.resize);
      document.removeEventListener('mouseup', this.endResize);
    },
  },
}
</script>

<style scoped>
.tab-and-dialog-container {
  position: relative;
}
.tab-and-dialog-container .my-dialog .el-dialog__body {
  overflow: hidden;
}
.my-dialog .resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  cursor: nwse-resize;
}
</style>

2. 在需要使用该组件的页面中引入并使用：

<template>
  <div>
    // 其他内容
    <tab-and-dialog></tab-and-dialog>
  </div>
</template>

<script>
import TabAndDialog from '@/components/TabAndDialog';

export default {
  components: {
    TabAndDialog,
  },
}
</script>

以上代码使用了Element UI组件库中的Tabs和Dialog组件，并且使用了Vue的响应式数据和事件处理函数来实现弹出框的拖拽和缩放功能。同时，弹出框的z-index设置为1000，可以保证它在其他页面元素之上。点击4个el-tab不会影响弹窗的拖拽和缩放。您可以根据自己的需求修改样式和事件处理逻辑。