vue自定义全局loading加载组件

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.vue

<template><div v-if="show"><div class="loader-rainbow"><div class="loader-inner"><div class="loader-line-wrap"><div class="loader-line"></div></div><div class="loader-line-wrap"><div class="loader-line"></div></div><div class="loader-line-wrap"><div class="loader-line"></div></div><div class="loader-line-wrap"><div class="loader-line"></div></div><div class="loader-line-wrap"><div class="loader-line"></div></div></div></div></div>
</template><script>
export default {name: "loading001",props: {show: Boolean,},data() {return {};},
};
</script><style scoped>
.loader-rainbow {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 9999;
}
.loader-inner {bottom: 0;height: 100px;left: 0;margin: auto;position: absolute;right: 0;top: 0;width: 100px;
}.loader-line-wrap {animation: spin 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;box-sizing: border-box;height: 50px;left: 0;overflow: hidden;position: absolute;top: 0;transform-origin: 50% 100%;width: 100px;
}
.loader-line {border: 4px solid transparent;border-radius: 100%;box-sizing: border-box;height: 100px;left: 0;margin: 0 auto;position: absolute;right: 0;top: 0;width: 100px;
}
.loader-line-wrap:nth-child(1) {animation-delay: -50ms;
}
.loader-line-wrap:nth-child(2) {animation-delay: -100ms;
}
.loader-line-wrap:nth-child(3) {animation-delay: -150ms;
}
.loader-line-wrap:nth-child(4) {animation-delay: -200ms;
}
.loader-line-wrap:nth-child(5) {animation-delay: -250ms;
}.loader-line-wrap:nth-child(1) .loader-line {border-color: hsl(0, 80%, 60%);height: 90px;width: 90px;top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {border-color: hsl(60, 80%, 60%);height: 76px;width: 76px;top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {border-color: hsl(120, 80%, 60%);height: 62px;width: 62px;top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {border-color: hsl(180, 80%, 60%);height: 48px;width: 48px;top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {border-color: hsl(240, 80%, 60%);height: 34px;width: 34px;top: 35px;
}@keyframes spin {0%,15% {transform: rotate(0);}100% {transform: rotate(360deg);}
}
</style>

index.js

import Vue from 'vue'
import loading001 from './index.vue'const LoadingConstructor = Vue.extend(loading001)const instance = new LoadingConstructor({el: document.createElement('div')
})instance.show = false
const loading = {show() {instance.show = truedocument.body.appendChild(instance.$el)},hide() {instance.show = false}
}export default {install() {if (!Vue.$showLoading) {Vue.$showLoading = loading}Vue.mixin({created() {this.$showLoading = Vue.$showLoading}})}
}

main.js引入

import loading001 from '@/components/loading001/index.js'
Vue.use(loading001)

页面中引用

 this.$showLoading.show();this.$showLoading.hide();

在js中引用，如封装axios场景

 Vue.$showLoading.show()Vue.$showLoading.hide()

4.完整代码，关注公众号苏苏的bug，更多vue相关，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

vue自定义全局loading加载组件相关推荐

vue 编写全局loading加载动画效果
加粗1.loading组件样式 <template><transition name="fade"><section><div class ...
axios vue 加载效果动画_vue+axios+element ui 实现全局loading加载示例
实现全局loading加载分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单对不对? import axios from 'axios'; imp ...
webpack和vue的按需加载组件、console、抓包
1.webpack和vue的按需加载组件 webpack特有的懒加载文件的方式,很大的提升了webpack打包SPA应用的在性能方面. 而从webpack2以后require.ensure已经被imp ...
记录--Vue自定义指令实现加载中效果v-load（不使用Vue.extend）
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助网站效果演示:ashuai.work:8888/#/myLoad GitHub仓库地址代码:github.com/shuirongshu- ...
vue自定义指令---处理加载图片失败时出现的碎图,onerror事件
目录一.自定义指令 1.局部注册和使用 2.全局注册和使用二.自定义指令处理图片加载失败(碎图) 一.自定义指令 vue中除v-model.v-show等内置指令之外,还允许注册自定义指令,获取D ...
图片懒加载及Vue自定义图片懒加载指令
文章目录监听滚动的方式 IntersectionObserver方式自定义图片懒加载vue指令1 自定义图片懒加载vue指令2 lazyLoadImage.js main.js中注册指令组件中使 ...
element使用自定义的loading加载效果
在使用loading加载的过程中,elementui提供了两种样式,但是针对不同的项目,也是有着不同的需求,需要不同的或者特制的loading加载效果. 解决思路如下: 结合elementui本身的标 ...
vue element-ui Loading加载事件的使用以及自定义Loading加载动画
elemen-ui官方使用 <el-tablev-loading="loading"element-loading-text="拼命加载中"element ...
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...

vue自定义全局loading加载组件

1.实现效果

2.实现原理

3.实现代码

4.完整代码，关注公众号苏苏的bug，更多vue相关，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

vue自定义全局loading加载组件相关推荐

最新文章

热门文章

vue自定义全局loading加载组件

1.实现效果

2.实现原理

3.实现代码

4.完整代码，关注公众号 苏苏的bug，更多vue相关，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

vue自定义全局loading加载组件相关推荐

最新文章

热门文章

4.完整代码，关注公众号苏苏的bug，更多vue相关，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！