从element-plus引入ILoadingInstance出现错误

最新推荐文章于 2024-03-11 09:54:07 发布
最新推荐文章于 2024-03-11 09:54:07 发布
阅读量1.5k 收藏 8
点赞数 12
分类专栏： # 前端技术栈 TypeScript 文章标签： vue.js 前端 javascript
本文为博主原创文章，不得用于商业用途，转载请注明出处，谢谢。
本文链接：https://blog.csdn.net/zxhzm_life/article/details/126030498
版权

引入ILoadingInstance出现错误

1.产生问题原因

因为element-plus版本更新频率高，引入ElLoading和ILoadingInstance的路径已经发生了改变，而且新版本的ILoadingInstance接口名改为了LoadingInstance，去掉了I
所以就会出现找不到模块loading.type的声明

在这里插入图片描述

2.新路径（2022/7/28）

import { LoadingInstance } from 'element-plus/lib/components/loading/src/loading.js'

引入成功
在这里插入图片描述

joeyhao123
关注
专栏目录
基于vue+element实现全局loading过程详解
11-19
项目中使用的是vue+element实现的全局loading 1.引入所需组件，这里主要就是router和element组件，element组件引入可以参考element官网 2.下面就是重点及代码实现了 首先是全局的一个变量配置参数，代码如下： //全局页面跳转是否启用loading export const routerLoading = true; //全局api接口调用是否启用loading export const apiLoading = true; //loading参数配置 export const loadingConfig = { lock: true, text:
从element-plus引入ElLoading和ILoadingInstance出现错误
CBY229的博客
11-13 3350
因为element-plus更新频率很高，所以路径也有改变，可以试一下我下面的这个引用路径，找了一早上的bug终于解决了
loading加载和统一异常处理
grow_的博客
04-20 1397
loading加载 1.按需导入 ElementUI组件 Loading 2.加载数据时， 打开和关闭 对象 （注意： loadingInstance 实例采用单例模式创建，防止响应异常时频繁切换路由时加载动效重复创建） 3.​​​​​​​请求拦截器中打开加载效果, 响应拦截器和异常中关闭加载效果. 统一异常处理 在响应拦截器中设置 加载和统一异常处理的完整代码： import axios from 'axios'; import { Loading, Message } from ...
全局封装loading 加载样式 vue3
hfyldx的博客
08-18 1763
全局封装加载样式
Vue项目 成员管理系统 加载效果和异常处理(9)
不是独角兽的博客
04-17 908
一、Loading 加载数据时显示动效 项目中调用Loading，使用服务的方式去调用 1.1按需导入 ElementUI 组件 Loading import { Loading } from 'element-ui';//按需引入 1.2 加载数据时，打开和关闭动效对象 注意： LoadingInstance 实例采用单例模式创建，防止响应异常时频繁切换路由时加载动效重复创建. 单例模式: 当关闭Loading再次打开时，调用的是前边关闭的实例，不会新创建实例. // 加载数...
element UI中loading加载框的花式用法
钱多多的博客
07-27 1万+
前端为了优化体验效果必不可少的就是加载框loading的使用。接口是异步的，获取数据是需要时间的，万一网络再卡顿下，总不能让用户干等着没数据的页面。那loading就必不可少了！
element-plus(element-plus@2.8.1/element-plus-2.8.1) 本地离线资源
最新发布
08-27
/npm/element-plus@2.8.1/dist 37.2K /npm/element-plus@2.8.1/es 36.4K /npm/element-plus@2.8.1/lib /npm/element-plus@2.8.1/theme-chalk 394 /npm/element-plus@2.8.1/attributes.json /npm/element-...
element-plus-2.2.12 本地资源文件
08-01
element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。 资源适用于离线开发，内网使用。 （本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）
element-plus(element-plus@2.5.5) 本地离线资源
02-05
element-plus@2.5.5 本地离线资源，适用于没有网络连接、搭建自己的cdn等用途。 All files（包含文件） /npm/element-plus@2.5.5/dist /npm/element-plus@2.5.5/es /npm/element-plus@2.5.5/lib /npm/element-...
element-plus离线文档
05-07
同时，Element Plus 的组件可以通过 `import` 语句引入，并在模板中直接使用。 5. **样式定制**：Element Plus 提供了主题定制工具，允许开发者根据自己的品牌风格调整组件的色彩、大小等样式。这通常涉及到 CSS ...
element-plus-2.8.0.zip
08-24
一个 Vue.js 3 UI 库
Element UI 框架中Loading 区域加载的使用方法
热门推荐
Geek-Haoyu
03-07 7万+
Loading 加载用于加载数据时显示动效 Element UI中的Loading组件默认是全屏显示，大多时候出于美观考虑我们并不需要这种功能　而是让它显示在我们需要的地方，比如一个后台管理系统，我们和后台进行网络传输的时候，我们并不需要把导航栏和系统的头部覆盖住，只需要内容部分显示，这时候我们就需要对组件的参数进行设置。 Element 提供了两种调用 Loading 的方法：指令和服务......
十一、加载效果和异常处理
qq_52335038的博客
10-14 586
一、Loading 加载数据时显示动效--- 提高用户体验度. 1. 按需导入 ElementUI 组件 Loading , Message ，在utils文件的request.js文件中： import { Loading, Message } from 'element-ui'; //先引入 2. 加载数据时， 打开和关闭动效 对象 注意：loadingInstance实例采用单例模式创建，防止响应异常时频繁切换路由时加载动效重复创建 // 加载数据时打开和关闭动效对象 let lo...
从element-plus 引入ILoadingInstance 出现类型错误
weixin_51614564的博客
03-11 266
可能是因为element-plus 多次升级原因，将原来的内部代码多次改下了，原来是loading.type文件，现在变成loading.js，包括。
Element-Plus中 “Loding” 组件的按需引用类型问题
m0_56690946的博客
03-24 681
以前的引用方式 现在的引用方式：以前的 “ILoadingInstance” 改为 “LoadingInstace” 将 “I” 删除
解决vite配置element-puls按需导入报错问题
Smile_ping的博客
02-08 3620
解决vite配置element-puls按需导入报错相关问题。
Vue3引入element-plus报错
烟溪彭于晏的博客
04-01 642
npm下载默认是最新版本，换一个版本就欧克了。
盘点一些项目中的不知道为什么的坑
forteenBrother的博客
10-31 172
const AXIOS_INSTANCE_CHECK = Axios.create({ timeout: 100000, baseURL: BASE_URL_CHECK }); // 请求拦截器 AXIOS_INSTANCE_CHECK.interceptors.request.use( (config) => { // 在发送之前做些什么 config.headers.uid = cookie.getCookie('hs_uid'); .
v-loading使用(来自官网介绍)
sherpan的博客
07-31 6万+
记录使用Element-UI的v-loading指令。Element提供了两种调用Loading的方法：指令和服务。 指令 对于自定义指令 v-loading，只需要绑定 Boolean即可，默认情况下，loading遮罩会插入到绑定元素的子节点通过添加 body修饰符，可以使遮罩插入至DOM中的body上。 自定义加载文案、图标和背景色 在绑定了v-loading指令的元素上添加elemen...
element-plus 引入小图标
06-26
npm install element-plus --save # 或者 yarn add element-plus ``` 2. 在你的项目中导入所需的图标库，通常是 `element-plus/icons`： ```javascript import { ElIcon } from 'element-plus'; ``` 3. ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值