利用插槽solt实现蒙尘加载效果Vue

效果：

插槽的作用：

定义一个名child子组件，为该子组件添加内容应该在子组件的template中定义，直接在父组件的标签中定义的内容不会被渲染，如下

作用：作用是HTML中两个界面显示加载时的小组件，且有一个蒙尘的效果，主要是用<slot>标签实现

代码：

App.vue代码:调用组件

<template><div id="app"><div style="width:1080px; margin:0 auto"><Modal><Center><!-- 插槽：居中 --><Loading /></Center></Modal></div></div>
</template><script>
import Loading from "@/components/Loading.vue";
import Center from "@/components/Center.vue";
import Modal from "@/components/Modal.vue";
export default {components: {Loading,Center,Modal,},
};
</script>

Modal.vue代码 ：蒙尘效果

<template><div class="modal"><!-- 蒙尘效果 --><slot></slot></div>
</template><style scoped>
.modal {width: 100%;height: 100%;position: fixed;z-index: 200;background: rgba(0, 0, 0, 0.5);left: 0;top: 0;
}
</style>

Loading.vue：主要是加载是的五条竖线动态加载效果

<template><div class="loading"><span></span><span></span><span></span><span></span><span></span></div>
</template><script>
export default {};
</script><style scoped>
.loading {height: 40px;margin: 100px auto;display: flex;justify-content: center;
}
.loading span {width: 8px;height: 100%;border-radius: 4px;background: lightgreen;animation: load 1s ease infinite;margin: 0 2px;
}
@keyframes load {0%,100% {transform: scaleY(1.5);/* 拉伸1.5倍 */background: lightgreen;}50% {transform: scaleY(1);background: lightblue;}
}
.loading span:nth-child(2) {animation-delay: 0.2s; /*设置延时时间 */
}
.loading span:nth-child(3) {animation-delay: 0.4s;
}
.loading span:nth-child(4) {animation-delay: 0.6s;
}
.loading span:nth-child(5) {animation-delay: 0.8s;
}
</style>

Center.vue：居中动态加载

<template><div class="center"><!-- 模板中的某个位置，无法确定位置 --><!-- 使用插槽 --><slot></slot></div>
</template><style scoped>
.center {position: fixed;/* 相对浏览器窗口定位 */left: 50%;top: 50%;transform: translate(-50%, -50%);
}
</style>

项目结构：

利用插槽solt实现蒙尘加载效果Vue相关推荐

利用 JQuery的load函数动态加载页面
利用JQuery的load函数动态加载页面 JQuery有好多Ajax函数,其中load是用来动态加载一个页面的内容到指定的dom元素上. 我们来做个例子: 做一个上下(左右)结构的页面,其中下左部分 ...
python录入数据至ppt_利用Python进行数据分析之数据加载.ppt
利用Python进行数据分析之数据加载 " " " " 数据加载,存储与文件格式 1,读写文本格式数据: (read_csv,read_table,read_ ...
利用Crowbar抓取网页异步加载的内容 [Python俱乐部]
利用Crowbar抓取网页异步加载的内容 [Python俱乐部] 利用Crowbar抓取网页异步加载的内容 [Python俱乐部] 利用Crowbar抓取网页异步加载的内容在做 Web 信息提取.数 ...
android progressdialog 背景色,怎么在android中利用ProgressDialog实现一个加载效果
怎么在android中利用ProgressDialog实现一个加载效果发布时间:2020-12-07 17:00:07 来源:亿速云阅读:77 作者:Leah 怎么在android中利用Progr ...
swiper 上滑触发_四种方式快速实现上滑触底加载效果
在智能小程序的开发过程中,上拉加载是一种十分常见的加载效果,最近也收到了一些开发者在开发上拉加载时遇到的问题,今天的内容就为您介绍一下如果想实现下述效果的上拉加载,我们需要如何去做. 以下是为大家总结 ...
android仿微博头像_Android 自定义 View 集锦｜自定义圆形旋转进度条，仿微博头像加载效果...
微博 App 的用户头像有一个圆形旋转进度条的加载效果,看上去效果非常不错,如图所示: 据说 Instagram 也采用了这种效果.最近抽空研究了一下,最后实现的效果是这样: 基本上能模拟出个大概,代 ...
python画菊花_使用css3实现小菊花加载效果
使用css3实现小菊花加载效果最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img ...
layui的几个简单使用(简单弹窗,加载效果,移除加载效果)
1.加载效果和移除加载效果 function layuiLoading(msg){layui.use(['layer', 'form'], function(){index = layer.load( ...
Jquery页面加载效果
1.说明 Jquery页面加载可实现异步请求时提示"请稍后,正在加载..."效果,同步请求不可用(即ajax async: false).本文地址:http://www.cnblo ...

利用插槽solt实现蒙尘加载效果Vue

效果：

利用插槽solt实现蒙尘加载效果Vue相关推荐

最新文章

热门文章