klp-oa/klp-ui/src/components/ChartWrapper/index.vue

<template>
  <div class="chart-wrapper" ref="chartWrapper">
    <!-- 操作按钮组 -->
    <div class="chart-actions">
      <button 
        class="action-btn fullscreen-btn" 
        @click="toggleFullscreen"
        title="全屏预览"
      >
        <i :class="isFullscreen? 'el-icon-close' : 'el-icon-full-screen'"></i>
      </button>
    </div>
    
    <!-- 图表容器（插槽内容） -->
    <div class="chart-container" ref="chartContainer">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFullscreen: false, // 是否处于全屏状态
      fullscreenElement: null, // 存储全屏元素引用
    };
  },
  mounted() {
    // 监听浏览器全屏状态变化事件
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('msfullscreenchange', this.handleFullscreenChange);
  },
  methods: {
    // 切换全屏/退出全屏
    toggleFullscreen() {
      if (!this.isFullscreen) {
        this.enterFullscreen();
      } else {
        this.exitFullscreen();
      }
    },
    
    // 进入全屏模式
    enterFullscreen() {
      const container = this.$refs.chartWrapper;
      
      // 不同浏览器的全屏 API 兼容
      if (container.requestFullscreen) {
        container.requestFullscreen();
      } else if (container.webkitRequestFullscreen) { /* Safari */
        container.webkitRequestFullscreen();
      } else if (container.msRequestFullscreen) { /* IE11 */
        container.msRequestFullscreen();
      } else if (container.mozRequestFullScreen) { /* Firefox */
        container.mozRequestFullScreen();
      }
      
      this.fullscreenElement = container;
    },
    
    // 退出全屏模式
    exitFullscreen() {
      if (!document.fullscreenElement) return;
      
      // 不同浏览器的退出全屏 API 兼容
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitExitFullscreen) { /* Safari */
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { /* IE11 */
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) { /* Firefox */
        document.mozCancelFullScreen();
      }
      
      this.fullscreenElement = null;
    },
    
    // 处理全屏状态变化
    handleFullscreenChange() {
      // 检查当前是否处于全屏状态
      const isFull =!!(
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement
      );
      
      this.isFullscreen = isFull;
      
      // 触发窗口 resize 事件，让图表自适应
      this.triggerResize();
    },
    
    // 触发窗口 resize 事件（让图表自适应）
    triggerResize() {
      const event = document.createEvent('Event');
      event.initEvent('resize', true, true);
      window.dispatchEvent(event);
    }
  },
  beforeDestroy() {
    // 移除事件监听
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('msfullscreenchange', this.handleFullscreenChange);
    
    // 组件销毁时如果处于全屏状态则退出
    if (this.isFullscreen) {
      this.exitFullscreen();
    }
  }
};
</script>

<style scoped>
.chart-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100px; /* 最小高度防止内容为空时样式异常 */
}

/* 全屏状态下的样式调整 */
.chart-wrapper:-webkit-full-screen {
  background-color: #fff;
  width: 100%!important;
  height: 100%!important;
}

.chart-wrapper:-moz-full-screen {
  background-color: #fff;
  width: 100%!important;
  height: 100%!important;
}

.chart-wrapper:fullscreen {
  background-color: #fff;
  width: 100%!important;
  height: 100%!important;
}

.chart-container {
  width: 100%;
  height: 100%;
  min-height: inherit;
}

/* 操作按钮组样式 */
.chart-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10; /* 确保按钮在图表上方 */
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: none;
  background-color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.action-btn:hover {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 图标样式（适配 Element UI 图标） */
.action-btn i {
  font-size: 16px;
  color: #666;
}

.action-btn:hover i {
  color: #1890ff;
}

/* 全屏状态下的按钮样式优化 */
:fullscreen.chart-actions {
  top: 20px;
  right: 20px;
}

:-webkit-full-screen.chart-actions {
  top: 20px;
  right: 20px;
}

:-moz-full-screen.chart-actions {
  top: 20px;
  right: 20px;
}
</style>