el-dialog，全屏时有时css样式丢失

### 解决方案 当 `el-dialog` 设置为全屏模式时，可能会因为动态调整 DOM 结构或者动画过程中某些 CSS 属性未被正确应用而导致样式丢失。以下是可能的原因分析以及解决方案： #### 原因分析 1. **动态属性覆盖**：在设置全屏的过程中，Vue 或者 Element Plus 可能会通过 JavaScript 动态修改对话框的样式，这可能导致原有的一些自定义样式被覆盖[^1]。 2. **CSS 特异性不足**：如果全局样式的优先级较低，则会被框架内部更高特异性的默认样式所替代。 3. **动画冲突**：如引用中的代码片段所示，在执行动画期间可能存在临时状态下的样式缺失。 #### 实现方法 可以通过以下几种方式来修复这个问题: 1. **增加高特异性选择器** 使用更具体的选择器可以有效防止其他样式覆盖您的定制化设计。例如： ```css .el-dialog.fullscreen { width: 100% !important; height: 100vh !important; margin: 0px auto !important; /* 移除顶部边距 */ top: 0 !important; left: 0 !important; border-radius: 0 !important; } ``` 2. **监听事件并手动更新样式** 如果发现即使增加了上述规则仍然存在部分显示异常的情况，可以在 Vue 组件中绑定相应的生命周期钩子函数或事件处理程序来进行额外操作。比如利用 `@open` 和 `@close` 自定义行为： ```javascript watchEffect(() => { const dialogEl = document.querySelector('.el-dialog'); if (props.modelValue && props.fullScreen) { // 当前处于打开且全屏状态下 nextTick().then(() => { Object.assign(dialogEl.style, { 'width': '100%', 'height': '100vh', 'margin': '0px', 'top': '0', 'left': '0' }); setTimeout(() => { restoreCustomStyles(); }, 50); // 确保所有过渡效果完成后再恢复特定样式 }); } else { resetDefaultStyle(dialogEl); } }); function restoreCustomStyles() { let customRules = getComputedStyle(document.body).getPropertyValue('--custom-rules'); if(customRules){ applyInlineStyle(customRules.split(';').map(rule=>rule.trim())); } } function applyInlineStyle(rulesArray){ rulesArray.forEach((rule)=>{ const [key,value]= rule.split(':'); if(key&&value){ dialogEl.style.setProperty(`--${key}`, value); } }) } ``` 3. **重写组件模板结构** 对于复杂场景下无法单纯依靠外部样式表解决问题的情形，考虑重构局部区域内的 HTML/CSS 架构也是一种可行的办法。即重新封装一个新的 Dialog Wrapper 来满足特殊需求。 --- ### 注意事项 - 上述提到的方法均需测试兼容性问题，尤其是在不同浏览器环境下表现是否一致。 - 需要特别注意性能开销，频繁的操作 DOM 节点会影响用户体验。