vue遮罩加载动画（可以当作全屏弹窗）

最新推荐文章于 2024-04-11 03:07:24 发布

jinzong53

最新推荐文章于 2024-04-11 03:07:24 发布

阅读量356

点赞数

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44701367/article/details/131712517

版权

笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

最终效果：

在这里插入图片描述

加载动画部分：

 <div id="app-cockpit-loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
 </div>

<style media="screen" type="text/css">#app-cockpit-loading{width:120px;height:40px;position:absolute;font-size:50px;line-height:50px;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);}#app-cockpit-loading span{display:inline-block;width:8px;height:100%;border-radius:4px;background:#1890ff;-webkit-animation:load 1s ease infinite;}@-webkit-keyframes load{0%,100%{height:40px;background:#1890ff;}50%{height:70px;margin:-15px 0;background:lightblue;}}#app-cockpit-loading span:nth-child(2){-webkit-animation-delay:0.2s;}#app-cockpit-loading span:nth-child(3){-webkit-animation-delay:0.4s;}#app-cockpit-loading span:nth-child(4){-webkit-animation-delay:0.6s;}#app-cockpit-loading span:nth-child(5){-webkit-animation-delay:0.8s;}</style>

遮罩部分：

<template>
  <div id="app">
    <div id="mask" ref="mask" @click="mask()"></div>
  </div>
</template>

钩子：
mounted() {
  this.$refs.mask.style.height = window.document.getElementById('app').clientHeight + 'px'
},

样式：
#mask{
  width: 100%;
  opacity: 0.6;
  background-color: black;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 998;
}
.mask_img{
  width: 316px;
  height: 200px;
  z-index: 999;
  position: fixed;
  right: 0px;
}

VUE组件

<template>
  <div id="app">
    <div id="mask" ref="mask" @click="mask()">
      <div id="app-cockpit-loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "loading",
  mounted() {
    this.$refs.mask.style.height = window.document.getElementById('app').clientHeight + 'px'
  },
  methods: {

  }
}
</script>

<style media="screen" type="text/css">#app-cockpit-loading{width:120px;height:40px;position:absolute;font-size:50px;line-height:50px;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);}#app-cockpit-loading span{display:inline-block;width:8px;height:100%;border-radius:4px;background:#1890ff;-webkit-animation:load 1s ease infinite;}@-webkit-keyframes load{0%,100%{height:40px;background:#1890ff;}50%{height:70px;margin:-15px 0;background:lightblue;}}#app-cockpit-loading span:nth-child(2){-webkit-animation-delay:0.2s;}#app-cockpit-loading span:nth-child(3){-webkit-animation-delay:0.4s;}#app-cockpit-loading span:nth-child(4){-webkit-animation-delay:0.6s;}#app-cockpit-loading span:nth-child(5){-webkit-animation-delay:0.8s;}</style>

<style>
#mask{
  width: 100%;
  opacity: 0.6;
  background-color: black;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 998;
}
.mask_img{
  width: 316px;
  height: 200px;
  z-index: 999;
  position: fixed;
  right: 0px;
}
</style>