实现点击 `el-dialog` 里面的一个图标将对话框放大至全屏

实现点击 el-dialog 里面的一个图标将对话框放大至全屏，你可以使用 JavaScript 使 el-dialog 的样式覆盖整个窗口。为此，我们可以添加一个图标按钮，点击时将对话框设置为全屏显示，再次点击时恢复其原始大小。

实现步骤

1. 添加全屏切换按钮：在 el-dialog 内部添加一个图标按钮，用于切换全屏模式。
2. 切换全屏状态的方法：实现一个方法来切换对话框的全屏状态。
3. 更新样式：通过操作样式使对话框在全屏和正常状态之间切换。

示例代码

Vue 模板部分

<template>
  <div>
    
    <div class="left" ref="left">
      这里是上面
    div>
    <div v-show="showTag" ref="resize" class="resize">div>
    <div v-show="showTag" class="mid" ref="mid">
      <p>这里是下面的内容，可以滚动。p>
      <p>这里是下面的内容，可以滚动。p>
      
    div>

    
    <el-button type="primary" @click="openPopup">打开弹出窗口el-button>
    
    
    <el-dialog
      ref="dialog" 
        <el-button @click="closePopup" size="mini" type="danger">关闭el-button>
      div>
      <div class="popup-content">
        
        <div class="resize">div>
        <div class="mid">
          <p>这里是下面的内容，可以滚动。p>
          <p>这里是下面的内容，可以滚动。p>
          
        div>
      div>
    el-dialog>
  div>
template>

Vue 脚本部分

<script>
export default {
  data() {
    return {
      showTag: true, // 控制 resize 和 mid 的显示
      showPopup: false, // 控制弹出窗口的显示
      isDragging: false, // 拖动状态
      dragOffset: { x: 0, y: 0 }, // 记录拖动偏移
      originalDialogWidth: '', // 记录对话框的初始宽度
      isFullscreen: false, // 是否处于全屏状态
      originalDialogStyle: {}, // 记录对话框的原始样式
    };
  },
  methods: {
    openPopup() {
      this.showPopup = true;
    },
    closePopup() {
      this.showPopup = false;
    },
    handleOpen() {
      // 获取 dialog 的 header 作为拖动区域
      this.$nextTick(() => {
        const header = this.$refs.dialog.$el.querySelector('.el-dialog__header');
        header.style.cursor = 'move';
      });
    },
    handleClose(done) {
      this.closePopup();
      done();
    },
    startDrag(event) {
      this.isDragging = true;
      const dialogEl = this.$refs.dialog.$el;

      // 在拖动之前固定对话框的宽度
      this.originalDialogWidth = dialogEl.style.width;
      dialogEl.style.width = dialogEl.offsetWidth + 'px';  // 将宽度固定为当前宽度

      this.dragOffset.x = event.clientX - dialogEl.offsetLeft;
      this.dragOffset.y = event.clientY - dialogEl.offsetTop;
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    onDrag(event) {
      if (this.isDragging) {
        const dialogEl = this.$refs.dialog.$el;
        const left = event.clientX - this.dragOffset.x;
        const top = event.clientY - this.dragOffset.y;
        dialogEl.style.left = `${left}px`;
        dialogEl.style.top = `${top}px`;
      }
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);

      // 恢复对话框的初始宽度设置
      this.$refs.dialog.$el.style.width = this.originalDialogWidth;
    },
    toggleFullscreen() {
      const dialogEl = this.$refs.dialog.$el;
      if (this.isFullscreen) {
        // 退出全屏
        dialogEl.style.width = this.originalDialogStyle.width;
        dialogEl.style.height = this.originalDialogStyle.height;
        dialogEl.style.left = this.originalDialogStyle.left;
        dialogEl.style.top = this.originalDialogStyle.top;
        dialogEl.style.transform = this.originalDialogStyle.transform;
      } else {
        // 进入全屏，记录原始样式
        this.originalDialogStyle = {
          width: dialogEl.style.width,
          height: dialogEl.style.height,
          left: dialogEl.style.left,
          top: dialogEl.style.top,
          transform: dialogEl.style.transform,
        };

        dialogEl.style.width = '100vw';
        dialogEl.style.height = '100vh';
        dialogEl.style.left = '0';
        dialogEl.style.top = '0';
        dialogEl.style.transform = 'none';
      }
      this.isFullscreen = !this.isFullscreen;
    },
  },
};
</script>

说明

1. 全屏按钮：在 el-dialog 的标题栏中添加了一个按钮，用于切换全屏状态。

2. toggleFullscreen 方法：该方法用于切换对话框的全屏状态。点击全屏按钮时：

   • 进入全屏：记录对话框的原始样式，并将 width 和 height 设置为 100vw 和 100vh，覆盖整个视口，同时重置 left 和 top 属性。
   • 退出全屏：恢复原始样式。

3. isFullscreen 状态：用于跟踪当前对话框是否处于全屏状态，以便切换按钮图标和样式。

4. 样式控制：使用 JavaScript 操作 DOM 的 style 属性来控制全屏和退出全屏的样式。

这样实现后，你就可以通过点击按钮来实现对话框的全屏和退出全屏功能了。