当前位置: 首页 > news >正文

手写一个Vue Loading通过自定义api控制显示与关闭 记录

实现目标调用方法(类似element的loading):

this.$loading.show() 显示

this.$loading.hide()关闭

应用vue知识点:extend函数,use函数
简单分析,this.loading的实现通过use使用插件方式把loading的实现通过use使用插件方式把loadinguse使loading属性绑定到Vue原型
show()和hide()实现通过extend函数生成loading组件对应vue子实例,单独控制属性,并动态把loading组件插入移除body

文件目录:
在这里插入图片描述

loading.vue (测试代码样式简单设置)

<template><div class="loading-wrap" v-if="visible"><div class="loading-view" >加载中...</div></div>
</template>
<script>
export default {name:'loading',data(){return{visible:false}},};
</script>
<style lang="css" scoped>
.loading-wrap {position: fixed;top: 0;right: 0;left: 0;bottom: 0;background-color: rgba(255, 255, 255, 0.6);
}
.loading-view {color: #333;font-size: 18px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}
</style>

index.js

import Vue from "vue";
import loading from "./loading";const vueInstance=Vue.extend(loading);
const childInstance= new vueInstance({el:document.createElement('div'),
});let interval;
const $loading={};//隐藏
$loading.hide=()=>{childInstance.visible=false;if(interval) {clearInterval(interval);interval=null;}if(childInstance.$el&&childInstance.$el.parentNode==document.body){document.body.removeChild(childInstance.$el)}
}//显示 time:显示多少时间后自动关闭
$loading.show=(time=2000)=>{childInstance.visible=true;document.body.appendChild(childInstance.$el);interval=setTimeout(() => {$loading.hide();}, time);
}export default $loading;

install.js

import loading from './index'export default{install(Vue){Vue.prototype.$loading=loading;}
}

main.js

import loading from './components/loading/install'
Vue.use(loading);

页面调用

this.$loading.show(3000);//显示(3秒后关闭)

this.$loading.hide()//关闭

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.exyb.cn/news/show-35134.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

webpack学习2-常用loader

1. style-loader 作用&#xff1a;使得css样式写入html的head中 &#xff0c;缺点是js打包很大&#xff0c;常和css-loader配合使用 用法&#xff1a; {test: /\.css$/,use: [style-loader, css-loader]}2. css-loader 作用&#xff1a;css-loader会处理import / require&am…...

Python基础知识(四)

Python函数 01、创建函数 # 创建函数语法 def funaction_name(parameters):"""docstring"""statements(s)02、调用函数 name "Tom" #定义函数 def greet(name):"""This function greets tothe person passed in as…...

目前最简多模态transformer:ViLT

facebook的文章&#xff0c;一句话概括&#xff1a;图像patch和文本embedding concat在一起过transformer&#xff0c;做图像-文本匹配任务 相比之前的多模态transformer&#xff0c;创新点在用Vit的patch方案作为visual embedding而不是先过CNN提取特征&#xff0c;或者更繁琐…...

Java入门视频教程!BAT大厂Java面试真题锦集干货整理

一面 一面就做了一道算法题&#xff0c;要求两小时内完成&#xff0c;给了长度为N的有重复元素的数组&#xff0c;要求输出第10大的数。典型的TopK问题&#xff0c;快排算法搞定。 算法题要注意的是合法性校验、边界条件以及异常的处理。另外&#xff0c;如果要写测试用例&am…...

疯狂涨知识!作为一名程序员我不忘初心

性能优化专栏 1.Tomcat性能优化整理 2.JVM性能优化专题 3.Mysql性能优化整理 微服务架构面试专栏 1.SpringCloud面试整理 2.SpringBoot面试整理 3.Dubbo面试整理 并发编程高级面试专栏 开源框架面试题专栏 1.Spring面试整理 2.SpringMVC面试整理 3.MyBatis面试整理 分布式面…...

18_Reinforcement Learning_CartPole_reduce_mean_Q-Value Iteration_Q-learning_DQN_get_weights

Reinforcement Learning (RL) is one of the most exciting fields of Machine Learning today, and also one of the oldest. It has been around since the 1950s, producing many interesting applications over the years,(For more details, be sure to check out Richar...

Mybatis02-传参、代理

一、sqlsession的三种查询方式 test代码 //1.读取资源InputStream resource Resources.getResourceAsStream("mybatis.xml");//2.创建sessionFactorySqlSessionFactory build new SqlSessionFactoryBuilder().build(resource);//3.创建sessionSqlSession session …...

java连接redis密码,绝对干货

前言 关于技术人如何成长的问题&#xff0c;一直以来都备受关注&#xff0c;因为程序员职业发展很快&#xff0c;即使是相同起点的人&#xff0c;经过几年的工作或学习&#xff0c;会迅速拉开极大的差距&#xff0c;所以技术人保持学习&#xff0c;提升自己&#xff0c;才能够…...

JavaScript中进制之间转换方法

最近在刷面试题的时候看到一道进制转换题&#xff0c; 写完才发现可以用js的方法直接转换&#xff0c;这是自己总结的一些方法 1.其它进制转换为十进制数据&#xff1a; //可以直接用parseInt let num parseInt(n1,n2); //n1:是需要转换为10进制的数 //n2:是被转换数据的进制…...

vue实现PC端标签拖动

1.拖动需要监听鼠标按下、移动、抬起事件 2.一开始全部用methods绑定方法&#xff0c;后面发现用自定义指令directives比较方便&#xff0c;不用声明在data里声明变量&#xff0c;以及一个一个的绑定事件 <template><div class"ad" v-drag><el-badge…...

实际生产中:Hive 合并小文件(强烈建议此法)

背景&#xff1a; 实际项目中,小文件的产生会影响hadoop集群的性能;过度使用namenode的内存等;启动过多的map任务,拉低整体Job的运行效率等等弊端。 解决方案&#xff1a; 针对Hive表(下文统称表A)中,特别是历史分区,存在大量小文件的话,强烈建议对分区下的小文件进行归档处…...

汽车UDS诊断之输入输出控制服务(0x2F)深度剖析

InputOutputControlByIdentifier就是输入输入控制服务&#xff0c;从字面上说&#xff0c;就是通过ID控制输入输出&#xff08;这里的ID指DID&#xff09;&#xff0c;从功能上说&#xff0c;又被称为输入输出控制功能单元。 输入输出控制功能单元服务描述InputOutputControlBy…...

90%的人都以为计算机白学了

90%的人都以为计算机白学了 我发现90%的人&#xff0c;都以为别的专业是白学的~ 比如&#xff0c;心理学算命的&#xff0c;室内设计装潢的&#xff0c;土木工程搬砖的&#xff0c;每次暴雨过后&#xff0c;校园内一旦有积水&#xff0c;给排水专业的铁定会被全员骂哭…… 计算…...

Intellij IDEA使用经验(二):代码提示忽略大小写

File-settings Editor-General-Code Completion 右边选择"none"。 54082)]...

SpringCloud API 网关(Zuul)

1 介绍 API 网关是对外服务的一个入口&#xff0c;其聚合内部服务&#xff0c;提供统一对外的 API 接口给前端系统&#xff0c;屏蔽内部实现细节&#xff0c;可以为我们管理大量的 API 接口&#xff0c;还可以对接客户、适配协议、进行安全认证、转发路由、限制流量、监控日志、…...

Linux安装mysql

查看mariadb版本 [rootnode1 ~]# rpm -qa | grep mariadb mariadb-libs-5.5.56-2.el7.x86_64 卸载mariadb [rootnode1 ~]# rpm -e mariadb-libs-5.5.56-2.el7.x86_64 --nodeps 重启机器 [rootnode1 ~]# reboot 安装依赖 yum install numactl yum install open…...

第七届蓝桥杯省赛C/C++B组 试题1:煤球数目

答案&#xff1a;171700 #include <cstdio>int main(){int n;int sum 0;int ans 0;for(int i1; i<100; i){sum i;ans sum;}printf("%d", ans);return 0; }...

CPU飙升排查思路

最近公司有个需求是对接E签宝的&#xff0c;也就是CA认证&#xff0c;大致的情况就是我们拿着文件去E签宝做CA认定&#xff0c;简单的理解就是拿着合同去E签宝盖章。 因为是对接三方的吗&#xff0c;所以在调E签宝服务的时候我就用log.info()把请求参数给打印了出来&#xff0c…...

Android面试相关文章及Github学习资料,全网疯传

导语 学历永远是横在我们进人大厂的一道门槛&#xff0c;好像无论怎么努力&#xff0c;总能被那些985,211 按在地上摩擦&#xff01; 不仅要被“他们”看不起&#xff0c;在HR挑选简历&#xff0c;学历这块就直接被刷下去了&#xff0c;连证明自己的机会也没有&#xff0c;学…...

信息学奥赛一本通(2059:【例3.11】买笔)

2059&#xff1a;【例3.11】买笔 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 987 通过数: 458 【题目描述】 期末来临了&#xff0c;班长小Q决定将剩余班费xx元钱&#xff0c;用于购买若干支钢笔奖励给一些学习好、表现好的同学。已知商店里有三种钢笔&#x…...

bootstrap table自定义新增行

.deleattrbtn,.addtrbtn{width: 60px;color: #fff;font-size: 12px;background-color: #3177E7;border-radius: 2px;border: 0; }#addtrdiv,#back_addtrdiv{margin: 10px 22px;text-align: right; }.table-bordered{table-layout: fixed;font-size: 12px; }.table th, .table...

解决Ambari启用Kerberos后HDFS/YARN/SPARK等页面无法打开问题

Ambari启用Kerberos认证后HDFS/YARN/SPARK等相关的组件的web页面都无访问了&#xff0c;提示要登录&#xff0c;401: Authorization required。 Ambari版本2.7.3.0 这个问题&#xff0c;可以通过两个办法解决 配置本机的kerberos认证&#xff0c;登录可以访问的user配置组件服…...

redis中的RDB和AOF

redis提供两种方式进行持久化&#xff0c;一种是RDB持久化&#xff08;原理是将Reids在内存中的数据库记录定时dump到磁盘上的RDB持久化&#xff09;&#xff0c;另外一种是AOF持久化&#xff08;原理是将Reids的操作日志以追加的方式写入文件&#xff09;。那么这两种持久化方…...

Redis集群的搭建和Redis的使用

Redis集群的搭建和Redis的使用 一.Redis的简介和用途 简介 Redis是一个高性能的key-value数据库。 Redis 与其他 key - value 缓存产品有以下三个特点&#xff1a; Redis支持数据的持久化&#xff0c;可以将内存中的数据保存在磁盘中&#xff0c;重启的时候可以再次加载进行…...

redis加锁、解锁

在Java中&#xff0c;关于锁我想大家都很熟悉。在并发编程中&#xff0c;我们通过锁&#xff0c;来避免由于竞争而造成的数据不一致问题。通常&#xff0c;我们以synchronized 、Lock来使用它。 但是Java中的锁&#xff0c;只能保证在同一个JVM进程内中执行。如果在分布式集群…...

Vue 路由导航

...

浮动布局,定位布局,伸缩盒布局

布局 默认文档流 1.元素显示的顺序和代码的顺序是一致的 2.块级元素独占一行空间&#xff0c;默认宽度为父元素的100%&#xff0c;高度由内容或者子元素决定 3.行内元素共享一行空间&#xff0c;默认宽高都由内容决定 浮动布局 float&#xff08;如果一个元…...

齐发78EX重大事件|荣获美国加拿大双国MSB牌照

齐发78EX LTD在2021年7月已同时获得美国及加拿大MSB合规运营牌照&#xff0c;标志着齐发78EX全球合规化的布局已经进入了一个新阶段。未来&#xff0c;齐发78EX也将继续致力于全球和规划进程的推进&#xff0c;面对全球化唯一的道路就是进一步获得全球投资者的信任&#xff0c;…...

vue如何实现数据双向绑定,我的阿里手淘面试经历分享,看这篇文章准没错!

前言 全网唯一一份&#xff0c;对标阿里P7年薪60w的Android高级工程师学习进阶路线&#xff08;图未完全展开&#xff0c;怕大家看不清楚&#xff09;&#xff1a; 本篇文章都会围绕这份脑图来写&#xff0c;详细的介绍你处于哪个阶段该如何进阶&#xff0c;以及年薪层次高低对…...

leetcode 236. 二叉树的最近公共祖先

题目来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode-cn.com/problems 特别鸣谢&#xff1a;来自夸夸群的 醉笑陪公看落花知乎&#xff0c;王不懂不懂知乎&#xff0c;QFIUNEcsdn 感谢醉笑陪公看落花知乎 倾囊相授&#xff0c;感谢小伙…...

dbc2000 注册机|dbc2000 注册码注册机下载

点击下载来源&#xff1a;dbc2000 注册机 dbc2000 注册机是同名源程序软件的注册机软件&#xff0c;该源程序软件是一款应用于数据库搭建以及数据写入的数据库架设工具&#xff0c;它拥有强大的数据写入功能&#xff0c;在作为应用程序使用时&#xff0c;它不仅可以充当数据属性…...

秋招面经第八弹:网易二面-数据开发工程师

秋招第八弹&#xff1a;网易二面-数据开发工程师 写在最前&#xff1a;秋招以来一直在冲&#xff0c;因为事情比较多&#xff0c;对于笔试面试一直没有复盘&#xff0c;现在靠仅存的记忆把面试的一些问题记录下来&#xff0c;尽可能记录出能回忆到的问题&#xff0c;但可能记的…...

安卓课程格子APP

https://download.csdn.net/download/weixin_57836618/73810452 功能演示&#xff1a; 查看所有课程 点击主页面空白处即可添加课程 添加课程之后查看课程 查看双周课程 查看单周课程 6.查看课程详情...

强化学习——格子世界

强化学习——格子世界 项目源码地址&#xff1a;https://gitee.com/infiniteStars/machine-learning-experiment 1. 实验内容 2. 实验代码 import numpy as np import matplotlib.pyplot as plt from matplotlib.table import Table from xml.dom.minidom import Document #手…...

华为机试 - 跳格子游戏

目录 题目描述 输入描述 输出描述 用例 题目解析 算法源码 题目描述 地上共有N个格子&#xff0c;你需要跳完地上所有的格子&#xff0c;但是格子间是有强依赖关系的&#xff0c;跳完前一个格子后&#xff0c;后续的格子才会被开启&#xff0c;格子间的依赖关系由多组st…...

php 爬课程表信息,Ruby爬取教务系统生成课程表

我为什么要虐自己最近觉得课程格子广告越来越多&#xff0c;乱七八糟的东西越来越多&#xff0c;完全失去了一开始的存在价值&#xff0c;并且没有电脑端app&#xff0c;想查看课程必须拿出手机&#xff0c;而我使用电脑频率要比手机高&#xff0c;所以才有了折腾的动力。于是我…...

android 课程表 ui,UICollectionViewLayout实现课程表布局

因为项目中有课程表的相关模块&#xff0c;第一时间想到用UICollectionView。然而后期的需求越来越复杂&#xff0c;每个格子需要展示的内容越来越多&#xff0c;所以不得不寻找合适的解决方案。最后发现自定义UICollectionViewLayout可以实现我的需求。先放效果图&#xff1a;…...

Android自定义View课程表,Android 自定义View课程表表格

自己闲下来时间写的一个课表控件使用的自定义LinearLayout 里面View都是用代码实现的 最终效果如下图 写的可能有问题希望多多指点创建一个自定义LinearLayout 控件用来装载课程的信息和课程的周数 和节数大概的布局三这样的根据上面的看来觉得总体布局我分了两个 上面的星期是…...

java课程设计设计_java课程设计

1. 团队课程设计博客链接https://www.cnblogs.com/choco1ate/p/12172223.html2.本组课题及本人任务本组课题&#xff1a;泡泡堂(炸弹人)游戏本人任务&#xff1a;Box类(游戏地图中的每个方格)Bomb类(游戏过程中的)游戏玩家输赢信息的文件储存3.需求分析Box类&#xff1a;该类为…...

《课程格子》的一个笔试题目

题目如下&#xff0c;感觉很适合喜欢琢磨的程序员&#xff0c;也是考验你编码风格的时候。 Lets make a tower defense game&#xff08;塔防游戏):1. You have 1 tower, with H health and D dps(damage per second).2. There are n attackers, each with h_i health and d_i …...

Android仿照超级课程表 or 课程格子 一键提取课表功能(方正系统)

参考文章http://blog.csdn.net/sbsujjbcy ,本文仿照‘ 安卓弟 提供的android 项目实战——打造超级课程表一键提取课表功能文章&#xff0c;对他的代码进行了修改和补充&#xff0c;为什么要修改呢&#xff1f;原因是安卓弟的那个源码版本过于老旧&#xff0c;很多方法已经过…...

机器学习、深度学习、计算机视觉、自然语言处理及应用案例

转自&#xff1a;http://blog.csdn.net/lql07161、机器学习/深度学习 1.1 对抗生成网络GAN 【2017.04.21】对抗生成网络GAN变种大集合 【链接】资源 | 生成对抗网络及其变体的论文汇总 【链接】生成对抗网络(GAN)图片编辑 【链接】CycleGAN失败案例 【链接】【2017.04.22】用条…...

【一步步学Metal图形引擎8】-《环境光》

教程 8 环境光 教程源码下载地址&#xff1a; https://github.com/jiangxh1992/MetalTutorialDemos CSDN完整版专栏&#xff1a; https://blog.csdn.net/cordova/category_9734156.html 一、原理 之前的教程中我们讨论了平行光下漫反射和镜面反射的实现&#xff0c;得到好…...

读里尔克的后感 文/奥斯·科特林

文/奥斯科特林 都说走向内心&#xff0c;可我观照我心&#xff0c;发现一片荒芜。 都说享受孤独&#xff0c;可我的孤独陪伴着我的孤独。 都说醒来读书&#xff0c;可我半夜凌晨孤灯。 都说寻一片寂静之地&#xff0c;可我不得不驱车前行。 那么多书&#xff0c;讲的无非就是人…...

资源下载 | 历年 AAAI 最佳论文(since 1996)

导语&#xff1a;AAAI 2020 投稿已经过万&#xff0c;有小伙伴说29号投的时候才三千多&#xff0c;没想到31号就过万了&#xff0c;由此可见本次 AAAI 20220 竞争力非常激烈了。 AAAI 2020 投稿已经过万&#xff0c;有小伙伴说29号投的时候才三千多&#xff0c;没想到31号就过…...

unity 实验演示 教程_Unity的演示团队– Unity最出色的视觉效果背后的创造者

unity 实验演示 教程With over 3.5-million views, Book of the Dead is hugely popular and many want to know how it was accomplished. Unity evangelist Matt Schell went to Stockholm to meet the Unity Demo team and learn what drives them. This is the kick-off po…...

Spark Release 2.0.0发版概序

Spark2.0在2016年7月26日发布&#xff0c;因为工作中经常用到&#xff0c;所以对它关注比较多&#xff0c;正好今天”提前”下班,所以抽空翻译一下spark2.0发版概述&#xff0c;简单的介绍一下spark2.0的新特性和新变化。好吧&#xff0c;现在就让村长带领大家一起走进spark2.0…...

说说react-custom-scrollbars插件在react hooks版本中的使用

react-custom-scrollbars插件读前说明基本使用属性介绍onScrollrenderViewrenderThumbVerticalautoHideautoHideTimeout读前说明 github地址&#xff1a;https://github.com/malte-wessel/react-custom-scrollbars 作用&#xff1a; 快速实现被包裹区域的滚动效果 关于本篇…...

33岁想从头学做网页设计_从头到头的10位客户我如何设计和推出saas产品

33岁想从头学做网页设计Creating a successful software as a service (SaaS) product is the dream for many entrepreneurial-minded programmers. In the process of launching my own SaaS I discovered that sharing and comparing experiences with other founders is an…...

美团集群调度系统的云原生实践

本文介绍了美团在如何解决大规模集群管理的难题、设计优秀且合理的集群调度系统方面的实践&#xff0c;阐述了美团在落地以Kubernetes为代表的云原生技术时&#xff0c;比较关心的问题、挑战以及对应的推进策略。同时本文也介绍了针对美团业务需求场景做的一些特色支持&#xf…...