自定义loading组件

自定义loading组件   在main.js 引用// Loading
import './components/loading/index.css';
import Loading from './components/loading/index.js';/*自定义 loading 组件调用this.$loading.show('加载中...');  使用方法this.$loading.hide();   使用方法作者:zhou
*/let _LOADING = {show: false, // Boolean loading显示状态component: null // Object loading组件};export default {install(Vue) {/*text: Stringtype: String*/Vue.prototype.$loading = function (text = '加载中...', type) {if (type == 'hide') {_LOADING.component.show = _LOADING.show = false;} else {//防连点if (_LOADING.show) {return;}//避免生成新节点if (_LOADING.component) {_LOADING.component.show = _LOADING.show = true;return;}let LoadingCompoent = Vue.extend({data: function () {return {show: _LOADING.show}},template: `<div v-show="show" class="loading-container"><div class="loading-img"></div><div class="loading-content">${text}</div>         </div>`});_LOADING.component = new LoadingCompoent();let element = _LOADING.component.$mount().$el;document.body.appendChild(element);_LOADING.component.show = _LOADING.show = true;}};// 打开/关闭['show', 'hide'].forEach(function (type) {Vue.prototype.$loading[type] = function (text) {return Vue.prototype.$loading(text, type);}});}}

.loading-container {position: absolute;left: 0;top: 0;width: 100%;height: 100%;/* width: 100vw;height: 100vh; */z-index: 9999;/* background: #ffffff; */display: flex;flex-direction: column;align-items: center;justify-content: center;
}.loading-img {/* position: fixed; */background: url("./img/加载中-大号.png") no-repeat;z-index: 3;width: 192px;height: 192px;/* top: 50%;left: 50%;transform: translate(-50%,-50%); */animation: rotate 2s infinite linear;
}.loading-content {font-family: SourceHanSansSC-Regular;font-size: 32px;font-weight: normal;font-stretch: normal;line-height: 60px;letter-spacing: 0px;color: #7485b8;
}@keyframes rotate {0% {-webkit-transform: rotate(0deg);}25% {-webkit-transform: rotate(90deg);}50% {-webkit-transform: rotate(180deg);}75% {-webkit-transform: rotate(270deg);}100% {-webkit-transform: rotate(360deg);}
}

        this.$loading.show();http.getNews(data).then((res) => {if (res.code == 200) {this.$loading.hide();

自定义loading组件相关推荐

Angular 自定义loading组件
1.在shared目录下新建loading文件夹 loading.component.html代码: <div id="loading" class="loadin ...
Vue自定义Loading动画，自定义全局JS组件Loading动画【记录】
创建 Loading 目录 loading.vue 代码: <template><div class="cus-loading" v-if="flag& ...
element-ui clearable 不显示_从ElementUI的loading组件说起
原文地址: 从ElementUI的loading组件说起alfxjx.github.io 前言最近发现自己的主页首屏加载很慢,于是想用一个loading组件掩饰一下,这一下就来到了知识的荒原,对插 ...
elementui组件_elementui 中 loading 组件源码解析（续）
上一篇我们说了elementui如何将loading组件添加到 Vue 实例上,具体内容见上期 elementui 中 loading 组件源码解析. 这一篇我们开始讲讲自定义指令自定义指令关于自 ...
elementui table某一列是否显示_elementui 中 loading 组件源码解析（续）
上一篇我们说了elementui如何将loading组件添加到 Vue 实例上,具体内容见上期 elementui 中 loading 组件源码解析. 这一篇我们开始讲讲自定义指令自定义指令关于自 ...
elementUI中loading组件的完美使用
有时候,网页数据请求太慢,在未得到数据的那一会会,时常会让心急的人怀疑是不是代码哪崩了,所以我需要一个东西来缓冲一下我等待的焦虑,在页面加载时添加一个加载动画首先安装element-ui框架 npm ...
react如何控制全局loading_React Loading组件的正确姿势
React Loading组件的正确姿势页面异步加载的时候为缓解用户等待的焦虑情绪,我们通常会采取加载中...等文字或图标提示. (图例,各种加载中状态) 日常写法直接在state中存一个load ...
android 自定义loading,Android自定义动画-StarLoadingView
今天来分享第二个自定义loading的动画,起了个名字叫蹦跶的星星 ,还是老规矩先介绍,后上图. 实现效果在最后,GIF有点大,手机流量慎重. 介绍首先声明做这个动画的初衷是为了学习和分享,所以从 ...
从0到1，一步步开发React的loading组件，并发布到npm上
没有发布过npm包的同学,可能会对NPM对开发有一种蜜汁敬畏,觉得这是一个很高大上的东西.甚至有次面试,面试官问我有没有发过npm包,当时只用过还没写过,我想应该挺难的,就小声说了没有,然后就让我回去 ...

自定义loading组件

自定义loading组件相关推荐

最新文章

热门文章