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

最新推荐文章于 2024-03-18 10:49:19 发布
最新推荐文章于 2024-03-18 10:49:19 发布
阅读量3.6k 收藏 3
点赞数 5
分类专栏： 踩坑日记 vue学习笔记 文章标签： vue javascript node.js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31068787/article/details/121642839
版权

起因

因为最近在学习 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 组件

image.png
官方文档

image.png

解决办法

那怎么解决呢 ？就可以解决当前问题，发现样式也加上了

//单独引入loading 样式
  
 import 'element-plus/theme-chalk/el-loading.css'

image.png
哈哈哈是我太菜了
不知道还有什么解决办法呢？
评论区的大神们 ？

大补bu
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
vue element-ui Loading加载事件的使用以及自定义Loading加载动画
snrt_Aurora的博客
12-21 7741
怎么使用 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 、 JWT 、 Redis 、 Mybatis-Plus 、 Knife4j 等技术栈搭建的前后端分离开源权限管理系统。 在线预览地址：http://vue3.youlai.tech 开源仓库地址：https://gitee.com/youlaiorg/vue3-element-admin 后端仓库地址：https://gitee.com/youlaiorg/youlai-boot
Vue3，TS和Element-plus全局配置调用axiosf服务ElLoading效果修改样式2022/6/17am
xumengxia的博客
06-17 1374
Vue3，TS和Element-plus全局配置调用axiosf服务ElLoading效果修改样式2022/6/17am
vue3+element-plus，在el-dialog中使用v-loading无效的解决方法
最新发布
m0_61480985的博客
03-18 1535
在使用el-dialog的时候，想要实现点击弹框，出现加载中的效果
vue+elementUI+axios实现的全局loading加载动画
lianzhang861的博客
08-22 7902
在请求较多的应用中，loading是必不可少的，否则人们不是认为程序卡了就是认为设备卡了 普通的项目中，每次请求基本都要手动写一下loading的出现和消失，且不说有些麻烦，而且在ajax异步的情况下，如果做不好loading同步，经常会出现loading不出现的情况，而且不同浏览器兼容性较差。 一.概念 在vue项目中，有了统一配置机制，可以实现对loading的配置使每次请求前自动出现l...
element-plus 中loading 自定义图片
加油小伙子
09-03 2462
<el-table v-loading="loading" element-loading-text="拼命加载中..." style="width: 100%"> </el-table> .el-table { height: 150px; .el-loading-spinner { background: url('/imgs/loading-svg/loading-bars.svg') no-repeat cente.
$("button").button("loading") 无效
qq_44927883的博客
03-26 2008
bootstrap 4.1.3 版本好像不行 换成3.3.7又行了。。。
修改element中loading的加载动画的样式
逆风优雅的博客
02-24 3036
首先 在引入element样式的下面，引入自己定义的样式，以覆盖element中的样式 其次，修改图标 最后，在我们定义的css文件中，对样式进行修改 @keyframes rotating { from { transform: rotate(0); } to { transform: rotate(360deg); } } .el-loading-mask > .el-loading-spinner&g.
(vue)在ajax获取数据时使用loading组件不起作用
qq_42453890的博客
03-16 2138
问题描述： 在用ajax获取数据时 页面没有变化，想用一个loading图标在获取数据时显示，获取完成后隐藏 整个系统用到了vue框架，在执行sure方法时调用ajax函数 sure() { console.log("pl_lon:" + slng + " " + "pl_lat:" + slat + " " + "pr_lon:" + elng + " " + "pr_lat:" + elat ); console.log("s:" + this.st + " "
Elements-plus中loading加载.....
qq_39175450的博客
04-24 912
导出文件接口用时过长时，希望通过一个loading的遮罩层来阻止用户在导出过程中进行其他操作，需求：将加载中的图标和文字显示在可视页面的中间范围，样式可以自定义。（1）第一步：在需要做遮罩层的元素上添加如下代码。（2）第二步：在样式中设置自定义样式。
element-plus-2.2.12 本地资源文件
08-01
element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。 资源适用于离线开发，内网使用。 （本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）
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-plus离线文档
05-07
element-plus离线文档，node服务已经配置好，直接node server.js即可使用，可以在内网部署，已经部署成功。
【Element】ElLoading 自定义动画
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
03-13 349
import { ElLoading } from "element-plus"; LoadingInstance = ElLoading.service({ background: "rgba(0, 0, 0, 0.7)", customClass: "ElLoading_class", }); // 主页面自定义加载动画 (按照自己需求修改) .ElLoading_class .el-l...
前端element-ui Loading全屏全局加载动画(路由跳转和拦截请求触发)及自定义Loading图标
Seven71111的博客
01-21 8125
目录 自定义加载Loading图标效果图 基于封装axios请求的request.js实现 自定义Loading图标 集成Loading后的request.js完整代码 基于Vuex的方式实现全屏全局加载 官网element-ui的loading组件介绍 自定义加载Loading图标效果图 基于封装axios请求的request.js实现 未集成loading的request.js import axios from 'axios'; import {Messag...
自定义element-ui loading 加载动画
qq_41709082的博客
08-27 4792
自定义element-ui loading 加载动画 1.直接在全局样式文件中修改: //index.scss 我这里是 index.scss 文件 //自定义 加载动画 .el-loading-spinner { background-image:url('../assets/loading_images/loading.gif'); // 这个是自己想设置的 gif 加载动...
Element 之loading动画的样式
m0_63026408的博客
05-10 408
将上传动画背景色改为灰色，透明度改为0.4，要下面的上传动画效果。
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 } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值