本文详细介绍如何在 element-ui 的 dialog 组件中实现全屏切换功能。通过定义全局状态变量控制显示状态，利用 slot 自定义标题栏并绑定点击事件，配合 CSS 样式调整布局，最终实现点击图标即可在普通与全屏模式间自由切换的效果。
最终实现效果如下图所示：
第一步，在 Vue 组件的 data 中定义一个名为 dialogFull 的全局变量，初始值为 false，用于控制弹窗是否处于全屏状态。
dialogFull:false,
第二步，在 <el-dialog> 标签上绑定 :fullscreen 属性，将其值指向刚才定义的 dialogFull 变量，从而将状态与组件行为关联。
:fullscreen="dialogFull"
第三步，通过 slot 自定义 dialog 的 title 区域。在标题栏右侧添加一个全屏图标按钮，并绑定点击事件，点击时切换 dialogFull 的状态（true 或 false），实现全屏与还原的切换逻辑。
<template slot="title">
<div class="avue-crud__dialog__header">
<span class="el-dialog__title">
<span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
通道配置
</span>
<div class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true">
<i class="el-icon-full-screen"></i>
</div>
</div>
</template>第四步，编写对应的 CSS 样式。注意若在全局样式文件中定义，需确保样式生效；若在单文件组件中，可能需要使用 /deep/ 或 ::v-deep 修饰符来穿透作用域。主要调整 header 的内边距、背景色以及全屏图标的样式，确保视觉与交互符合预期。
//这里注意：我当前将css样式加载全局上，如果单页添加样式需要每个样式前添加 ‘/deep/' 修饰符
/* dialog*/
.el-dialog__header {
padding: 15px 20px 15px;
}
.el-dialog__headerbtn{
top: 15px;
}
/*dialog header*/
.el-dialog__header{
background: #e3eaed;
}
.avue-crud__dialog__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.el-dialog__title {
color: rgba(0,0,0,.85);
font-weight: 500;
word-wrap: break-word;
}
.avue-crud__dialog__menu {
padding-right: 20px;
float: left;
}
.avue-crud__dialog__menu i {
color: #909399;
font-size: 15px;
}
.el-icon-full-screen{
cursor: pointer;
}
.el-icon-full-screen:before {
content: "\e719";
}
至此，全屏功能配置完成。
以上就是关于在 element-ui 的 dialog 组件中增加全屏功能的完整教程，更多相关技术内容可参考本站其他文章。