踩坑日记2-Element Plus 按需加载 loading 加载样式问题

最新推荐文章于 2024-07-10 10:51:13 发布
最新推荐文章于 2024-07-10 10:51:13 发布
阅读量3.6k 收藏 3
点赞数 2
分类专栏： 前端 html 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67392126/article/details/123324148
版权
在学习Vue3 + TypeScript时，作者遇到Element Plus按需加载loading样式不生效的问题。通过查看源码和官方文档，发现el-loading是一个插件而非组件。最终，通过正确配置解决了样式缺失的问题。
摘要由CSDN通过智能技术生成

起因

因为最近在学习 Vue3 + ts, UI库 选择了 Element Plus

但是我发现 按照Element官方 文档 按需引入 loading 的样式不起效果
文档链接

在做了相关配置后
image.png

但我在使用时发现loading样式没有生效(el-button 样式是有的 看图)， class 是添加上了，我就疑问样式去哪了？

image.png

查找问题

首页看 el-button 源码， 好家伙一大堆 看不懂

image.png
那就先不看 el-button 去看 el-loading 源码，el-loading 代码就少很多了 不到 20 行
还有 一个 关键字 install , 去看了Vue的官方文档 原来 el-loading 是一个插件，不是一个 component 组件

<
最低0.47元/天 解锁文章
m0_67392126
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
【Vue3-ElementPlus】关于v-loading不生效以及控制台输出[Vue warn]: Failed to resolve directive: loading 的问题
weixin_44733774的博客
12-11 3253
在main.js中导入ElLoading组件，并在app应用实例挂载app.mount之前加上一条指令注册语句，然后v-loading指令就能正常使用了。
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
解决点击后界面延迟loading的问题
IU
04-02 335
【优化】解决页面的阻塞问题
elementplus 中v-loading 在滚动页面中的显示
最新发布
weixin_55257510的博客
07-10 219
使用element的框架，当有滚动页面的时候，loading的遮罩层会随着滚动条移动。由CSS可知，遮罩层div是使用绝对坐标，固定在页面上，不会随着滚动而移动。在窗口中添加一个div，专门负责显示loading遮罩层。遮罩层会随着滚动上移，非常难看。
vue3中使用element-plus的v-loading失效问题
2301_78419762的博客
01-24 2139
在main.js中导入ElLoading组件，并在app应用实例挂载app.mount之前加上一条指令注册语句，然后v-loading指令就能正常使用了main.js//main.jsimport { ElLoading } from 'element-plus'//【新增】app.directive('loading',ElLoading.directive)//【新增】解决成功。
记录ElementUI的bug：v-loading设置文本无效
前端笔记——放弃很容易,但坚持一定很酷
10-08 2059
给el-input标签加一个div父元素，给div元素添加上面的属性，就可以了。可以自定义文案、图标和背景色。
vue3.0 + element Plus点击按钮发送请求，添加loading加载状态
m0_52761651的博客
03-02 4329
vue3.0 + element Plus点击按钮发送请求，添加loading加载状态
修改element中loading的加载动画的样式
逆风优雅的博客
02-24 3109
首先 在引入element样式的下面，引入自己定义的样式，以覆盖element中的样式 其次，修改图标 最后，在我们定义的css文件中，对样式进行修改 @keyframes rotating { from { transform: rotate(0); } to { transform: rotate(360deg); } } .el-loading-mask > .el-loading-spinner&g.
element-plus-2.2.12 本地资源文件
08-01
element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。 资源适用于离线开发，内网使用。 （本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）
element-plus离线文档
05-07
7. **性能优化**：在使用 Element Plus 构建大型应用时，考虑懒加载组件、使用 Tree Shaking 减小打包体积、优化渲染性能等都是必要的实践。 8. **错误处理与调试**：熟悉 Vue DevTools 这样的开发工具可以帮助...
Nuxt配置Element-UI按需引入的操作方法
10-15
主要介绍了Nuxt配置Element-UI按需引入方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue2.* element tabs tab-pane 动态加载组件操作
01-21
一、重要部分 1、 注意 <component is=item.content></component> ：表明模板 <el v-for=(item) key=item.name label=item.title ...2、content: ‘Jbxx’ ，其中 jbxx 是 模板 addTab (targetNam
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-element-plus-admin-master.zip
11-19
Vue Element Plus Admin 是一个基于 Vue.js、Vite 和 Element Plus 的现代化前端框架，用于构建高效、易维护的管理后台系统。这个压缩包“vue-element-plus-admin-master.zip”包含了一个完整的项目源码，允许开发者...
element-plus-admin：基于Vue 3和ElementPlus的管理样板
02-26
元素加管理员 基于Vue 3和ElementPlus的管理样板。 :clapper_board: 预览 :construction: 状态 工作正在进行中 ...$ cd element-plus-admin $ npm install pnpm -g $ pnpm install $ pnpm run serve
vue-element-plus-admin 是一个基于 element-plus 免费开源的中后台模版
04-05
vue-element-plus-admin 是一个基于 element-plus 免费开源的中后台模版。使用了最新的vue3，vite4，TypeScript等主流技术开发，开箱即用的中后台前端解决方案，
element-plus新版本icon使用
Lizejin961019的博客
12-16 4175
最近使用element-plus的icon总是不显示，也是头发掉了一大把，测试了很多办法以后也终于是解决了。 记录一下解决方案。 <el-form-item> <el-input :prefix-icon="Avatar" v-model="form.username" placeholder="用户名"></el-input> </el-form-item> <script> export default { name: "Logi
element-plus实现改变遮罩层loading的样式和文本内容，包含监听上传文件取消上传事件的监听
weixin_64141611的博客
04-18 2079
element-plus实现改变遮罩层loading的样式和文本内容，包含监听上传文件取消上传事件的监听 import { ElLoading } from 'element-plus' 第二步，创建实例
element-plus el-loading 图标修改
g7778的博客
07-20 2370
学习
element-plus如何按需加载
10-13
要按需加载 element-plus，需要使用 babel-plugin-component 插件。具体步骤如下： 1. 安装 babel-plugin-component 插件： ``` npm install babel-plugin-component -D ``` 2. 在 babel.config.js 中配置插件： ```javascript module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ 'component', { libraryName: 'element-plus', styleLibraryName: 'theme-chalk' } ] ] } ``` 3. 在需要使用的组件中按需引入： ```javascript import { Button } from 'element-plus' export default { components: { [Button.name]: Button } } ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值