实现点击 `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 方法:该方法用于切换对话框的全屏状态。点击全屏按钮时:

    • 进入全屏:记录对话框的原始样式,并将 widthheight 设置为 100vw100vh,覆盖整个视口,同时重置 lefttop 属性。
    • 退出全屏:恢复原始样式。
  3. isFullscreen 状态:用于跟踪当前对话框是否处于全屏状态,以便切换按钮图标和样式。

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

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

你可能感兴趣的:(vue.js,elementui,前端)