库存数据看板
This commit is contained in:
砂糖
207
klp-ui/src/components/ChartWrapper/index.vue
Normal file
207
klp-ui/src/components/ChartWrapper/index.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user