实现点击 el-dialog
里面的一个图标将对话框放大至全屏,你可以使用 JavaScript 使 el-dialog
的样式覆盖整个窗口。为此,我们可以添加一个图标按钮,点击时将对话框设置为全屏显示,再次点击时恢复其原始大小。
实现步骤
- 添加全屏切换按钮:在
el-dialog
内部添加一个图标按钮,用于切换全屏模式。 - 切换全屏状态的方法:实现一个方法来切换对话框的全屏状态。
- 更新样式:通过操作样式使对话框在全屏和正常状态之间切换。
示例代码
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" <!-- 添加 ref -->
:visible.sync="showPopup"
width="50%"
:before-close="handleClose"
custom-class="custom-dialog"
@open="handleOpen"
>
<div class="popup-header" slot="title" @mousedown="startDrag">
拖动我
<el-button @click="toggleFullscreen" icon="el-icon-full-screen" size="mini" type="primary"></el-button> <!-- 全屏按钮 -->
<el-button @click="closePopup" size="mini" type="danger">关闭</el-button>
</div>
<div class="popup-content">
<!-- 将 resize 和 mid 内容放在这里 -->
<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>
说明
-
全屏按钮:在
el-dialog
的标题栏中添加了一个按钮,用于切换全屏状态。 -
toggleFullscreen
方法:该方法用于切换对话框的全屏状态。点击全屏按钮时:- 进入全屏:记录对话框的原始样式,并将
width
和height
设置为100vw
和100vh
,覆盖整个视口,同时重置left
和top
属性。 - 退出全屏:恢复原始样式。
- 进入全屏:记录对话框的原始样式,并将
-
isFullscreen
状态:用于跟踪当前对话框是否处于全屏状态,以便切换按钮图标和样式。 -
样式控制:使用 JavaScript 操作 DOM 的
style
属性来控制全屏和退出全屏的样式。
这样实现后,你就可以通过点击按钮来实现对话框的全屏和退出全屏功能了。