Vue自定义Loading插件

最新推荐文章于 2024-02-19 15:27:47 发布
最新推荐文章于 2024-02-19 15:27:47 发布
阅读量756 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000017965804
版权

图片描述

基于vue全家桶

目录结构

├── components
│   ├── Loading
│   ├── ├── index.js
│   └── └── index.css
└── main.js

components/Loading/index.js

 /*
    自定义 loading 组件
    调用
    this.$loading('正在加载中...');
    this.$loading.close();
*/ 
 let _LOADING = {
        show: false,     // Boolean loading显示状态
        component: null  // Object loading组件
     };    
export default {
    install(Vue) {
        /*
            text: String
            type: String
        */
        Vue.prototype.$loading = function(text='正在加载中...', type) {
            if (type == 'close') {
                _LOADING.component.show = _LOADING.show = false;
            } else {
                if (_LOADING.show) {
                    return;
                }
                let LoadingCompoent = Vue.extend({
                    data: function() {
                        return {
                            show: _LOADING.show
                        }
                    },
                    template: `<div v-show="show" class="zh-load-mark">
                                    <div class="zh-load-box">
                                        <div class="zh-loading">
                                            <div class="loading_leaf loading_leaf_0"></div>
                                            <div class="loading_leaf loading_leaf_1"></div>
                                            <div class="loading_leaf loading_leaf_2"></div>
                                            <div class="loading_leaf loading_leaf_3"></div>
                                            <div class="loading_leaf loading_leaf_4"></div>
                                            <div class="loading_leaf loading_leaf_5"></div>
                                            <div class="loading_leaf loading_leaf_6"></div>
                                            <div class="loading_leaf loading_leaf_7"></div>
                                            <div class="loading_leaf loading_leaf_8"></div>
                                            <div class="loading_leaf loading_leaf_9"></div>
                                            <div class="loading_leaf loading_leaf_10"></div>
                                            <div class="loading_leaf loading_leaf_11"></div>
                                        </div>
                                        <div class="zh-load-content">${text}</div>
                                    </div>
                                </div>`
                });
                _LOADING.component = new LoadingCompoent();
                let element = _LOADING.component.$mount().$el;
                document.body.appendChild(element);
                _LOADING.component.show = _LOADING.show = true;
            }
        };
        // 打开/关闭
        ['open', 'close'].forEach(function(type) {
            Vue.prototype.$loading[type] = function(text) {
                return Vue.prototype.$loading(text, type);
            }
        });
    }
}

components/Loading/index.css

.zh-load-mark {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
.zh-load-box {
    position: fixed;
    z-index: 3;
    width: 7.6em;
    min-height: 7.6em;
    top: 180px;
    left: 50%;
    margin-left: -3.8em;
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    border-radius: 5px;
    color: #FFFFFF;
}
.zh-load-content {
    margin-top: 64%;
    font-size: 14px;
}
.zh-loading {
    position: absolute;
    width: 0px;
    left: 50%;
    top: 38%;
}
.loading_leaf {
    position: absolute;
    top: -1px;
    opacity: 0.25;
}
.loading_leaf:before {
    content: " ";
    position: absolute;
    width: 9.14px;
    height: 3.08px;
    background: #d1d1d5;
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
    border-radius: 1px;
    -webkit-transform-origin: left 50% 0px;
    transform-origin: left 50% 0px;
}
.loading_leaf_0 {
    -webkit-animation: opacity-0 1.25s linear infinite;
    animation: opacity-0 1.25s linear infinite;
}
.loading_leaf_0:before {
    -webkit-transform: rotate(0deg) translate(7.92px, 0px);
    transform: rotate(0deg) translate(7.92px, 0px);
}
.loading_leaf_1 {
    -webkit-animation: opacity-1 1.25s linear infinite;
    animation: opacity-1 1.25s linear infinite;
}
.loading_leaf_1:before {
    -webkit-transform: rotate(30deg) translate(7.92px, 0px);
    transform: rotate(30deg) translate(7.92px, 0px);
}
.loading_leaf_2 {
    -webkit-animation: opacity-2 1.25s linear infinite;
    animation: opacity-2 1.25s linear infinite;
}
.loading_leaf_2:before {
    -webkit-transform: rotate(60deg) translate(7.92px, 0px);
    transform: rotate(60deg) translate(7.92px, 0px);
}
.loading_leaf_3 {
    -webkit-animation: opacity-3 1.25s linear infinite;
    animation: opacity-3 1.25s linear infinite;
}
.loading_leaf_3:before {
    -webkit-transform: rotate(90deg) translate(7.92px, 0px);
    transform: rotate(90deg) translate(7.92px, 0px);
}
.loading_leaf_4 {
    -webkit-animation: opacity-4 1.25s linear infinite;
    animation: opacity-4 1.25s linear infinite;
}
.loading_leaf_4:before {
    -webkit-transform: rotate(120deg) translate(7.92px, 0px);
    transform: rotate(120deg) translate(7.92px, 0px);
}
.loading_leaf_5 {
    -webkit-animation: opacity-5 1.25s linear infinite;
    animation: opacity-5 1.25s linear infinite;
}
.loading_leaf_5:before {
    -webkit-transform: rotate(150deg) translate(7.92px, 0px);
    transform: rotate(150deg) translate(7.92px, 0px);
}
.loading_leaf_6 {
    -webkit-animation: opacity-6 1.25s linear infinite;
    animation: opacity-6 1.25s linear infinite;
}
.loading_leaf_6:before {
    -webkit-transform: rotate(180deg) translate(7.92px, 0px);
    transform: rotate(180deg) translate(7.92px, 0px);
}
.loading_leaf_7 {
    -webkit-animation: opacity-7 1.25s linear infinite;
    animation: opacity-7 1.25s linear infinite;
}
.loading_leaf_7:before {
    -webkit-transform: rotate(210deg) translate(7.92px, 0px);
    transform: rotate(210deg) translate(7.92px, 0px);
}
.loading_leaf_8 {
    -webkit-animation: opacity-8 1.25s linear infinite;
    animation: opacity-8 1.25s linear infinite;
}
.loading_leaf_8:before {
    -webkit-transform: rotate(240deg) translate(7.92px, 0px);
    transform: rotate(240deg) translate(7.92px, 0px);
}
.loading_leaf_9 {
    -webkit-animation: opacity-9 1.25s linear infinite;
    animation: opacity-9 1.25s linear infinite;
}
.loading_leaf_9:before {
    -webkit-transform: rotate(270deg) translate(7.92px, 0px);
    transform: rotate(270deg) translate(7.92px, 0px);
}
.loading_leaf_10 {
    -webkit-animation: opacity-10 1.25s linear infinite;
    animation: opacity-10 1.25s linear infinite;
}
.loading_leaf_10:before {
    -webkit-transform: rotate(300deg) translate(7.92px, 0px);
    transform: rotate(300deg) translate(7.92px, 0px);
}
.loading_leaf_11 {
    -webkit-animation: opacity-11 1.25s linear infinite;
    animation: opacity-11 1.25s linear infinite;
}
.loading_leaf_11:before {
    -webkit-transform: rotate(330deg) translate(7.92px, 0px);
    transform: rotate(330deg) translate(7.92px, 0px);
}
@-webkit-keyframes opacity-0 {
    0% {
        opacity: 0.25;
    }
    0.01% {
        opacity: 0.25;
    }
    0.02% {
        opacity: 1;
    }
    60.01% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.25;
    }
}
@-webkit-keyframes opacity-1 {
    0% {
        opacity: 0.25;
    }
    8.34333% {
        opacity: 0.25;
    }
    8.35333% {
        opacity: 1;
    }
    68.3433% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.25;
    }
}
@-webkit-keyframes opacity-2 {
    0% {
        opacity: 0.25;
    }
    16.6767% {
        opacity: 0.25;
    }
    16.6867% {
        opacity: 1;
    }
    76.6767% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.25;
    }
}
@-webkit-keyframes opacity-3 {
    0% {
        opacity: 0.25;
    }
    25.01% {
        opacity: 0.25;
    }
    25.02% {
        opacity: 1;
    }
    85.01% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.25;
    }
}
@-webkit-keyframes opacity-4 {
    0% {
        opacity: 0.25;
    }
    33.3433% {
        opacity: 0.25;
    }
    33.3533% {
        opacity: 1;
    }
    93.3433% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.25;
    }
}
@-webkit-keyframes opacity-5 {
    0% {
        opacity: 0.270958333333333;
    }
    41.6767% {
        opacity: 0.25;
    }
    41.6867% {
        opacity: 1;
    }
    1.67667% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.270958333333333;
    }
}
@-webkit-keyframes opacity-6 {
    0% {
        opacity: 0.375125;
    }
    50.01% {
        opacity: 0.25;
    }
    50.02% {
        opacity: 1;
    }
    10.01% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.375125;
    }
}
@-webkit-keyframes opacity-7 {
    0% {
        opacity: 0.479291666666667;
    }
    58.3433% {
        opacity: 0.25;
    }
    58.3533% {
        opacity: 1;
    }
    18.3433% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.479291666666667;
    }
}
@-webkit-keyframes opacity-8 {
    0% {
        opacity: 0.583458333333333;
    }
    66.6767% {
        opacity: 0.25;
    }
    66.6867% {
        opacity: 1;
    }
    26.6767% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.583458333333333;
    }
}
@-webkit-keyframes opacity-9 {
    0% {
        opacity: 0.687625;
    }
    75.01% {
        opacity: 0.25;
    }
    75.02% {
        opacity: 1;
    }
    35.01% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.687625;
    }
}
@-webkit-keyframes opacity-10 {
    0% {
        opacity: 0.791791666666667;
    }
    83.3433% {
        opacity: 0.25;
    }
    83.3533% {
        opacity: 1;
    }
    43.3433% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.791791666666667;
    }
}
@-webkit-keyframes opacity-11 {
    0% {
        opacity: 0.895958333333333;
    }
    91.6767% {
        opacity: 0.25;
    }
    91.6867% {
        opacity: 1;
    }
    51.6767% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.895958333333333;
    }
}

main.js

// Loading
import './components/Loading/index.css';
import Loading from './components/Loading/index';
Vue.use(Loading);

调用

this.$loading('正在加载中...');
this.$loading.close();

参考链接：
https://www.cnblogs.com/crazycode2/p/7927473.html

weixin_34150224
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自定义vue的loading插件
08-12
本插件用于vue2.x,自定义了一个钩子(asyncMethods)(会自动合并进methods钩子)，用来放置异步函数可以获取各种接口请求，异步函数的loading状态，配合其他更具状态显示loading的组件（例如elementui的v-loading指令）...
vue的自定义插件toastloadingalert等
08-12
vue的自定义插件，toast，loading，alert等
Vue 全局loading组件实例详解
08-27
主要介绍了Vue 全局loading组件,需要的朋友可以参考下
vue 自定义 提示框（Toast）组件
weixin_30902675的博客
08-17 519
1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var showToast = false, // 存储toast显示状态 showLoad = false, // 存储loading显示状态 toastVM = null, //...
vue3项目配置按需自动引入自定义组件unplugin-vue-components
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
02-19 1394
Anthony Fu，在Git上的账号是antfu，是Vue和Vite核心成员，同时也是VueUse、Slidev几个开源项目的作者……，他的一些插件都是非常非常实用的！我们通常在项目中，需要手动引入自定义的各种组件，如果涉及的页面功能比较多的话，光是import的长度都能赶上春联了。这就是前端大神Anthony Fu写的的非常好用的插件，其实已经被vite官方收录了。将你引入自定义组件的import*****之类的语句，去掉，依旧正常运行。如果，能有一个插件帮我们实现自动引入，是不是要谢天谢地了呢？
Element-UI Loading 加载组件在 Vue 中使用
qq_43262022的博客
11-10 3085
Element-UI Loading 加载组件在 Vue 中使用 官方使用 Loading 该组件解决在请求数据和加载渲染过程中的等待空白。 以下以本人的 vue 项目，作为实践讲解。 引入组件，并配置在 Vue 原型上。 import { Loading } from "element-ui"; Vue.prototype.$loading = Loading.service; 在需要的组件或页面中使用如下： 在组件中 methods 对象中添加如下方法 loadingShow() {
Vue 前端加载效果(this.$loading)
niangfan0788的博客
05-08 1925
2、代码执行后，关闭loading。
vue封装loading效果插件
weixin_61115283的博客
03-15 1870
简单封装一个等待弹框效果
使用vue自定义指令开发表单验证插件validate.js
12-10
今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程。 1.vue插件开发 关于vue的插件开发，官方文档里有很清晰的说明，详情可以去阅读开发文档。我自己开发的表单验证插件validate.ts和...
mt-loading：自定义指令-loading
02-17
vue自定义指令-局部加载 npm仓库地址： 咋装下呢？ yarn add mt-loading使用npm i mt-loading 看下到底是个啥 用起来！兄弟萌！ 使用咋装下呢?中的命令将插入插件安装到你的项目之后，就可以在main.js中使用import ...
基于Vue的信息管理系统
06-20
插件：vue-preview (vue图片预览组件 ) vue点击图片预览放大（可旋转、翻转、缩放、上下切换、键盘操作） 插件viewerjs GitHub地址：https://github.com/fengyuanchen/viewerjs 加入全局方式的loading： ...
vue中使用this.$loading()给整个页面添加遮罩
weixin_43258184的博客
03-04 1万+
如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 $loading。 调用方法： this.$loading() this.$loading().close() 使用步骤： 1、完整引入了 Element import ElementUI from 'element-ui' // pc端组件 2、在向后台发起请求前调用this.loading()，在请求结束后调用this.loading()，在请求结束后调用this.loading()，在请求结束后调用this.lo
Vue3插件——一文讲透
诸葛韩信--一个前往前端不归路的浪子
06-12 3177
插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。Vue 3 插件可以全局注册、本地注册或在组件内部使用。Vue 插件通常以可重用的形式提供，可以在任何基于Vue.js应用程序中使用。/* 可选的选项 */})一个插件可以是一个拥有install()方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给app.use()// 配置此应用。
vue3封装全局loading
weixin_56812055的博客
06-07 373
vue3使用js封装全局的loading 第一步 在components文件中新建myLoad.vue组件 <template> <div class="loading" v-show="msg.show"> <div>{{msg.title}}</div> </div> </template> <script> export default { props: { .
Vue Loading 组件
qq_39961766的博客
12-09 915
安装 npm install vue-loading-demo 使用：在main.js中引入 import Loading from 'vue-loading-demo' Vue.prototype.$Loading = Loading 然后即可在任意.vue文件中使用 // 不设置参数则取默认值 const load = this.$Loading() const load = this.$Loading({ type: 'spiningSpot', // loading图标样式
vue 正在加载的使用方法
qq_41038929的博客
07-03 467
refresh() { const loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); setTimeout(() => { loading.close(); }, 500); },
$loading 全局应用
虚无缥缈
10-07 111
$loading element ui
vue使用loading加载
weixin_39246975的博客
04-13 8847
1、效果: 1649832674984 2、前言： 在vue中提供v-loading命令，用于div的loading加载，因为v-loading需要绑定一个双向绑定的变量，因此会产生如果页面需要多个loading，则需要很多个变量，在此不必要的情况下，作者自己写了一个vue的插件。 1、引入依赖 #如果你的vue项目版本为3.0+,使用该命令 npm i loading-viewer-v
【通俗易懂】vue中loading功能实现方法
热门推荐
seeeeeeeeeee的博客
08-05 1万+
效果图 我是点击后让他出现loading效果。 上代码 <template> <div> <!-- 重点就是这一句话，v-loading,加在你需要效果的标签上就行了， 他会自动在你的容器中间出现一层遮罩层并有个转圈的样式 --> <div v-loading="show" @click="change" style="height:200px;width:200px"> 123 </div>
Error loading vue.config.js:
最新发布
02-28
"Error loading vue.config.js" 是指在加载 Vue 项目的配置 vue.config.js 时出现了错误。这个配置文件用于对 Vue 项目进行自定义配置，例如设置代理、配置打包路径等。 出现这个错误可能有以下几个原因： 1. 文件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值