Vue3组件封装，以封装Loading组件为例

最新推荐文章于 2024-05-14 11:26:47 发布
最新推荐文章于 2024-05-14 11:26:47 发布
阅读量1.6k 收藏 4
点赞数
分类专栏： 前端 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46627407/article/details/125641852
版权

组件封装的意义

提示：本文技术栈为vue3+ts+antdv

  • 为了更好的复用
  • 进行项目代码解耦
  • 封装可重用代码
  • 代码逻辑更好的耦合（当一个组件被多处复用时，只需修改组件即可，不用每处都修改）
  • 提高开发效率

loading效果类似于如下：
在这里插入图片描述

Loading组件封装(子组件)

<template>
  <a-spin size="large" class="postion" :spinning="data"
最低0.47元/天 解锁文章
浪漫文艺前端程序猿
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 全局封装loading加载教程(全局监听)
01-18
为了页面美观，请求接口的时候延迟没有数据，页面感觉狠卡顿，封装loading，请求接口成功后隐藏掉（我这是用的vant 组件根据自己情况进行改变）。 第一步： 建立loading.vue <div class=loading> 加载中... ...
vue3使用js封装全局loading
wjw0125的博客
06-01 1630
第一步 在components文件夹中新建myLoad.vue组件 <template> <div class="loading" v-show="msg.show"> <div>{{msg.title}}</div> </div> </template> <script> export default { props: { msg: Object,
Vite + Vue3 + TS 封装axios + 封装loading + 封装返回顶部
技术前端，忠于热爱 @0.活在风浪里
07-21 6882
目前为止我们实现了 axios封装 loading 封装 返回顶部封装！本人亲测保证能用，最后祝大家2022越来越强
2024年最全vue3 解决各场景 loading过度 ，避免白屏尴尬！_vue3 loading(3)，腾讯Web前端开发面试记录
最新发布
2401_84433974的博客
05-14 366
当我们每次打卡页面，切换路由，甚至于异步组件，都会有一个等待的时间；为了不白屏，提高用户体验，添加一个loading过度动画是 非常 常见的；那么这几种场景我们应该把loading加在哪里呢？技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。
全局封装loading 加载样式 vue3
hfyldx的博客
08-18 1693
全局封装加载样式
vue3 使用封装loading
weixin_46328739的博客
11-16 461
vue3 使用封装loading
Vue3 Loading组件的封装(通用组件的使用) 引入直接使用
阿乐的博客
10-20 399
开发不易，希望各位小伙伴们多多支持下哈~~ ☕️☕️。
vue3使用nprogress实现全局loading进度条
samate6666的博客
09-15 2028
使用nprogress快速实现全局loading进度条
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
12-29
vue 封装自定义组件 tabal列表编辑单元格组件 请输入内容 v-loading=editLoading size=small> <el type=text><i class=el-icon-check @
Vue二次封装axios为插件使用详解
01-21
vuejs2.0 已经不再维护 vue-resource，vuejs2.0 已经使用了 axios,这也是为什么我会转到 axios 的主要原因，废话不多说： 基本的封装要求： 统一 url 配置 统一 api 请求 request (请求)拦截器，例如：带上token...
Vue中的封装api
01-08
我做vue和react的项目都是用的这一套api（时间戳是我新加的），接口，方法分开，便于管理。 sever.js import axios from 'axios' import qs from 'qs' /** * 自定义实例默认值 */ const instance = axios.create({...
vue3 解决各场景 loading过度 ，避免白屏尴尬！
热门推荐
好川的博客
03-26 1万+
解决项目打开白屏过长，项目打开时加载动画，路由切换时加载动画，异步组件加载动画
vue3笔记十五(vue3插件)
weixin_43123984的博客
07-01 872
通常我们像vue全局添加一些功能时，会 采用插件 的模式，有以下两种写法。插件可以实现添加 全局的方法或资源（过滤器、过渡）等等2.1、对象类型写法 2.2、函数类型写法 3、引入及使用 3.1、main.ts中引入 3.2、其他组件中使用 4、Loading插件Demo 原文链接： https://blog.csdn.net/qq_41880073/article/details/124271358 https://xiaoman.blog.csdn.net/article/details/123300
vue3加载进度条
kanno的博客
02-07 947
vue3加载进度条
vue封装loading效果插件
weixin_61115283的博客
03-15 1897
简单封装一个等待弹框效果
vue3 实现自定义指令 v-loading（基于 ant design 的 spin 组件实现）
sjkafljask的博客
08-10 1240
想法： 本来是想简单的通过对指令的绑定节点设置相对定位然后在其子级创建loading组件覆盖原有元素，但考虑到强制改变节点样式可能对原有样式产生干扰，于是有了新的想法。
使用vue3封装一个loading加载动画效果
weixin_55541470的博客
12-14 654
【代码】使用vue3封装一个loading加载动画效果。
vue3自定义全局Loading
SongZhengxing_的博客
09-25 2559
如果完整引入了 Element Plus，那么上会有一个全局方法$loading，同样会返回一个 Loading 实例。名称说明类型默认targetLoading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入以获取到对应 DOM 节点stringbody同v-loading指令中的body修饰符booleanfalsefullscreen同v-loading指令中的fullscreen修饰符booleantruelock同。
Vue3自定义插件实现全局Loading效果
05-23 2518
新建一个index.ts插件文件：将loading组件加载进去，并且给vue对象全局挂载LOADING属性。
vue3 封装一个全局loading组件
05-20
好的，以下是一个简单的全局loading组件的封装示例： ```vue <template> <div v-if="loading" class="loading"> <div class="spinner"></div> <div class="text">{{ text }}</div> </div> </template> <script> export default { name: 'GlobalLoading', data() { return { loading: false, text: 'Loading...', }; }, methods: { show(text = 'Loading...') { this.loading = true; this.text = text; }, hide() { this.loading = false; this.text = 'Loading...'; }, }, }; </script> <style scoped> .loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; } .spinner { width: 40px; height: 40px; border-radius: 50%; border: 4px solid #fff; border-top-color: #1e88e5; animation: spin 1s ease-in-out infinite; } .text { margin-top: 20px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; } @keyframes spin { to { transform: rotate(360deg); } } </style> ``` 在需要显示loading的地方，可以调用 `this.$loading.show()` 方法显示loading，调用 `this.$loading.hide()` 方法隐藏loading。 需要注意的是，在使用前需要在Vue的根实例中进行全局注册： ```js import GlobalLoading from './GlobalLoading.vue'; const app = createApp(App); // 注册全局loading组件 app.component('GlobalLoading', GlobalLoading); app.mount('#app'); ``` 这样，就可以在任意组件中使用全局loading组件了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值