vue 组件全局封装_vue项目全局封装一个loading组件

最新推荐文章于 2024-07-18 21:22:31 发布
最新推荐文章于 2024-07-18 21:22:31 发布
阅读量845 收藏
点赞数 1
文章标签： vue 组件全局封装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42601134/article/details/112033275
版权

1.loading组件

export default {

props: {

title: {

type: String,

default: '正在载入...'

}

}

}

.fade-enter-active, .fade-leave-active {

transition: opacity .5s;

}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {

opacity: 0;

}

section {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0,0,0,.3);

z-index: 999;

display: flex;

align-items: center;

justify-content: center;

}

.loading {

width: 100%;

text-align: center;

/* flex-direction: column; */

}

.loading span{

display: inline-block;

width: 8px;

height: 100%;

border-radius: 4px;

background: lightgreen;

-webkit-animation: load 1s ease infinite;

margin-left: 5px;

}

@-webkit-keyframes load{

0%,100%{

height: 40px;

background: lightgreen;

}

50%{

height: 70px;

margin: -15px 0;

background: lightblue;

}

}

.loading span:nth-child(2){

-webkit-animation-delay:0.2s;

}

.loading span:nth-child(3){

-webkit-animation-delay:0.4s;

}

.loading span:nth-child(4){

-webkit-animation-delay:0.6s;

}

.loading span:nth-child(5){

-webkit-animation-delay:0.8s;

}

2.在loading.vue同级下创建一个loading.js

import loading from './loading.vue';

const Loading = {

install:function(Vue) {

Vue.component('Loading', loading)

}

}

export default Loading;

3.在main.js注册

import Vue from 'vue'

import loading from './components/loading'

Vue.use(loading)

4.在组件中使用封装好的loading组件

或困
关注
vue 组件全局封装_关于vue中全局组件通用组件的封装及使用方法介绍
weixin_42552410的博客
12-30 1752
使用vue开发项目，有些UIvue使用install定义安装全局组件需要install和use这两个api来配合才能完成，组件通过export暴露出install方法 。但如果直接将指定组件赋值到vue的prototype上，组件不需要vue.use安装直接就能用。1.全局组件单例模式这里通过实现一个 Notify移动端消息提示组件和加载组件，来对组件的封装过程进行详述。实例一： Notify组件...
vue 2 全局封装 loading 组件
weixiao_ni的博客
03-12 2654
注册组件 main.js 引入 封装好的方法 使用 Vue.use(loading) 注册组件 书写封装方法 import Vue from 'vue' import loading from './loading.vue' // loading 样式 let $app = Vue.extend(loading) 在 vue 中注册loading组件 let $loading = new $app().$mount(document.createElement('div')) 创建 loadi
Vue 全局loading组件实例详解
08-27
主要介绍了Vue 全局loading组件,需要的朋友可以参考下
vue 封装全局的Loading
weixin_53587375的博客
01-05 811
【代码】vue 封装全局的Loading。
什么是diff算法？
最新发布
hexadecimal_001的博客
07-18 743
定义：Diff算法通过比较两个对象（如两个文本文件、两个虚拟DOM树等）来找出它们之间的差异，并根据这些差异生成一个补丁文件或差异描述，以便能够将这些差异应用到另一个对象上。工作原理：Diff算法的基本思想是比较两个对象的元素（如文本中的行、代码中的节点等），找出它们之间的不同之处，并记录下来。这些差异可能包括添加、删除或修改操作。
vue封装全局loading
lhl_888888的博客
04-29 1008
vue封装全局loading 第一步在components的文件夹下创建一个Global文件夹（文件夹名称可以随便起）在Global文件夹下创建一个index.js文件，如下图： 在index.js中写入以下代码： // 要将loading注册为全局组件 import Vue from 'vue' // 引入组件 import loading from'@/components/loading/loading' const createloading = Vue.extend(loading) // 实
【Sass】混入mixin
夜雨Gecer的博客
11-26 214
mixin就相当于js中的函数，对一些样式进行了封装，减少代码的编写。 混合宏无法重载，参数可以设置默认值。 <template> <div id="app"> <div></div> <div></div> <div></div> </div> &lt...
vue 全局封装loading加载教程(全局监听)
01-18
为了页面美观，请求接口的时候延迟没有数据，页面感觉狠卡顿，封装loading，请求接口成功后隐藏掉（我这是用的vant 组件根据自己情况进行改变）。 第一步： 建立loading.vue <div class=loading> 加载中... ...
以 Vue 3 项目为例，多个请求下如何全局封装 Loading 的展示与关闭？其中大有学问！
CodeQi技术小栈的博客
06-29 637
#app {
VUE中封装一个全局的loading组件
KBK2020的博客
07-22 2614
KBK：其实刚刚开始的话，就没有想到要写loading组件，在做项目的时候，等待后台接口渲染的时候样式有点太丑，就想到做一个loading效果，其实作为前端，也可以使用vant element-ui 等，里面就有好多loading样式，但是我又有点太懒，懒得去一个一个的页面进行loading效果，就想到做一个全局的。。。话不多说，干货来了，嘻嘻 1.创建一个loading.vue , 里面的内容如下： （img 是从网上扒拉下来的 ，你也可以选择自己喜欢的图片哦 ） <template&gt
vue组件（全局，局部，动态加载组件）
10-18
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。这篇文章主要介绍了vue组件（全局，局部，动态加载组件）,需要的朋友可以参考下
vue全局loading组件
weixin_30662011的博客
02-28 826
本组件作用在页面加载完成前进行loader提示，提升用户体验，只需要在app.vue中引用一次，整个项目中路由切换时就可以自动进行提示(vuex版)；1. 添加vuex值和方法；import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { ...
Vue2封装自定义全局Loading组件
07-29 1979
解决Element UI等UI库没有加载框组件的痛点
【VUE】全局封装Loading
qq_45933228的博客
03-26 919
每次接口请求完成到响应之间的时间间隔需要一个过渡动画，但是如果每次请求都去手动设置loading代码过于冗余，于是决定简单封装一个全局loading。本文的所有实例代码均为Vue3+ts编写。
vue 实现全局使用的loading组件（使用Vue.extend）
baidu_33164415的博客
12-21 591
vue 实现全局使用的loading组件（使用Vue.extend）
【Vue3组件】封装全局路由切换loading效果
温的打怪之旅
07-14 367
实现更优雅的切换动画，详情可以参考主页上一篇文章。
vue自定义全局loading加载组件
苏苏就是小苏苏的博客
03-10 3918
1.实现效果 2.实现原理 Vue.extend:extend 创建的是 Vue 构造器,可通过 new Profile().$mount(’#mount-point’) 来挂载到指定的元素上。 vue中install方法： export default { install(Vue,option){ 组件 指令 混入 挂载vue原型 } } 3.实现代码 新建components文件夹-新建loading001文件夹-新建index.vue+index.js index.
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、付费专栏及课程。

余额充值