Skip to content

Element Plus 指令/服务样式需手动导入 #271

Description

@yinhx3

问题: unplugin-element-plus(vite 插件)只自动导入 <el-xxx> 组件的样式(如 el-tableel-button),不处理以下两类:

  • 指令v-loadingv-infinite-scroll
  • 服务ElMessageElMessageBoxElNotification

当使用 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 还是预期行为,至少要在文档里提一下

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions