问题: unplugin-element-plus(vite 插件)只自动导入 <el-xxx> 组件的样式(如 el-table、el-button),不处理以下两类:
- 指令:
v-loading、v-infinite-scroll 等
- 服务:
ElMessage、ElMessageBox、ElNotification 等
当使用 import { vLoading } from 'element-plus' 时,指令逻辑正常运行(DOM 元素被创建),但 CSS 未加载。v-loading 的遮罩层(.el-loading-mask)没有绝对定位和半透明背景,退化为普通块元素,导致被遮罩的内容被挤到下方而不是被覆盖。
修正: main.ts 中手动导入相关 CSS:
// src/main.ts
import 'element-plus/theme-chalk/el-loading.css'
如果将来其他指令/服务遇到样式缺失,同样在 main.ts 中添加对应 CSS 导入:
element-plus/theme-chalk/el-message.css
element-plus/theme-chalk/el-message-box.css
element-plus/theme-chalk/el-notification.css
不知道这是 bug 还是预期行为,至少要在文档里提一下
问题:
unplugin-element-plus(vite 插件)只自动导入<el-xxx>组件的样式(如el-table、el-button),不处理以下两类:v-loading、v-infinite-scroll等ElMessage、ElMessageBox、ElNotification等当使用
import { vLoading } from 'element-plus'时,指令逻辑正常运行(DOM 元素被创建),但 CSS 未加载。v-loading的遮罩层(.el-loading-mask)没有绝对定位和半透明背景,退化为普通块元素,导致被遮罩的内容被挤到下方而不是被覆盖。修正:
main.ts中手动导入相关 CSS:不知道这是 bug 还是预期行为,至少要在文档里提一下