vue封装一个loading的效果

最新推荐文章于 2024-04-29 10:42:46 发布
最新推荐文章于 2024-04-29 10:42:46 发布
阅读量84 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64397933/article/details/134951743
版权

效果视频

1702365951578

//封装成一个组件


<template>
  <view class="mask" :class="mask == 'true' || mask == true ? 'mask-show' : ''" @click="Mclose" v-if="show"
    @touchmove.stop.prevent="preventTouchMove">
    <view class="loading">
      <view class="squareXS"></view>
      <view class="squareXL"></view>
    </view>
    <!-- 加载动画结束 -->
    <view class="title">{{text}}</view>
  </view>
  <!-- 遮罩层-->
</template>

<script scoped="true">
  export default {
    name: "PageLoading",
    props: {
      text: String,
      mask: Boolean | String,
      click: Boolean | String,
    },
    data() {
      return {
        show: false
      };
    },
    methods: {
      preventTouchMove() {
        console.log('stop user scroll it!');
        return;
      },
      Mclose() {
        if (this.click == 'false' || this.click == false) {
          this.show = false
        }
      },
      open() {
        this.show = true
      },
      close() {
       this.show = false
      }
    }
  };
</script>

<style>
  .mask {
    /* pointer-events: none; */
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    /*    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; */
  }

  .mask.mask-show {
    background-color: #fff;
  }

  .title {
    position: absolute;
    top: 60%;
    left: 50%;
    color: #23BAE8;
    margin: 0 0 0 -80rpx;
    font-size: 28rpx;
  }

  /* loading加载动画的css */
  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 240rpx;
    width: 160rpx;
    margin: -120rpx 0 0 -80rpx;
  }

  .loading:after {
    content: "";
    position: absolute;
    bottom: -5rpx;
    left: -5%;
    width: 110%;
    height: 10rpx;
    border-radius: 100%;
    background: #ececec;
    z-index: -1;
    animation: shadow 1.8s linear infinite;
  }

  .squareXS {
    position: absolute;
    bottom: 30rpx;
    left: 68rpx;
    width: 24rpx;
    height: 24rpx;
    border-radius: 2rpx;
    transform: scale(1.5, 0.5) rotate(0);
    background: #23BAE8;
    animation: squareXS 1.8s linear infinite;
  }

  .squareXL {
    position: absolute;
    bottom: -20rpx;
    left: 44rpx;
    width: 72rpx;
    height: 72rpx;
    border-radius: 2rpx;
    transform: scale(2, 0.5) rotate(0);
    background: #23BAE8;
    animation: squareXL 1.8s linear infinite;
  }

  @-moz-keyframes squareXS {
    0% {
      transform: scale(1.5, 0.5) rotate(0);
    }

    10% {
      transform: scale(1, 1) rotate(0);
    }

    42% {
      transform: scale(1, 1) rotate(-180deg);
      bottom: 250rpx;
    }

    74% {
      transform: scale(1, 1) rotate(-360deg);
    }

    75% {
      transform: scale(1, 1) rotate(-360deg);
      bottom: 74rpx;
    }

    95% {
      transform: scale(1.5, 0.5) rotate(-360deg);
      bottom: 23rpx;
    }

    100% {
      transform: scale(1.5, 0.5) rotate(-360deg);
      bottom: 14rpx;
    }
  }

  @-webkit-keyframes squareXS {
    0% {
      transform: scale(1.5, 0.5) rotate(0);
    }

    10% {
      transform: scale(1, 1) rotate(0);
    }

    42% {
      transform: scale(1, 1) rotate(-180deg);
      bottom: 250rpx;
    }

    74% {
      transform: scale(1, 1) rotate(-360deg);
    }

    75% {
      transform: scale(1, 1) rotate(-360deg);
      bottom: 74rpx;
    }

    95% {
      transform: scale(1.5, 0.5) rotate(-360deg);
      bottom: 23rpx;
    }

    100% {
      transform: scale(1.5, 0.5) rotate(-360deg);
      bottom: 14rpx;
    }
  }

  @-o-keyframes squareXS {
    0% {
      transform: scale(1.5, 0.5) rotate(0);
    }

    10% {
      transform: scale(1, 1) rotate(0);
    }

    42% {
      transform: scale(1, 1) rotate(-180deg);
      bottom: 250rpx;
    }

    74% {
      transform: scale(1, 1) rotate(-360deg);
    }

    75% {
      transform: scale(1, 1) rotate(-360deg);
      bottom: 74rpx;
    }

    95% {
      transform: scale(1.5, 0.5) rotate(-360deg);
      bottom: 23rpx;
    }

    100% {
      transform: scale(1.5, 0.5) rotate(-360deg);
      bottom: 14rpx;
    }
  }

  @keyframes squareXS {
    0% {
      transform: scale(1.5, 0.5) rotate(0);
    }

    10% {
      transform: scale(1, 1) rotate(0);
    }

    42% {
      transform: scale(1, 1) rotate(-180deg);
      bottom: 250rpx;
    }

    74% {
      transform: scale(1, 1) rotate(-360deg);
    }

    75% {
      transform: scale(1, 1) rotate(-360deg);
      bottom: 74rpx;
    }

    95% {
      transform: scale(1.5, 0.5) rotate(-360deg);
      bottom: 23rpx;
    }

    100% {
      transform: scale(1.5, 0.5) rotate(-360deg);
      bottom: 14rpx;
    }
  }

  @-moz-keyframes squareXL {
    0% {
      transform: scale(2, 0.5) rotate(0);
    }

    10% {
      transform: scale(1, 1) rotate(0);
    }

    42% {
      transform: scale(1, 1) rotate(90deg);
      bottom: 120rpx;
    }

    74% {
      transform: scale(1, 1) rotate(180deg);
    }

    75% {
      transform: scale(1, 1) rotate(180deg);
      bottom: 0;
    }

    95% {
      transform: scale(2, 0.5) rotate(180deg);
      bottom: -20rpx;
    }

    100% {
      transform: scale(2, 0.5) rotate(180deg);
    }
  }

  @-webkit-keyframes squareXL {
    0% {
      transform: scale(2, 0.5) rotate(0);
    }

    10% {
      transform: scale(1, 1) rotate(0);
    }

    42% {
      transform: scale(1, 1) rotate(90deg);
      bottom: 120rpx;
    }

    74% {
      transform: scale(1, 1) rotate(180deg);
    }

    75% {
      transform: scale(1, 1) rotate(180deg);
      bottom: 0;
    }

    95% {
      transform: scale(2, 0.5) rotate(180deg);
      bottom: -20rpx;
    }

    100% {
      transform: scale(2, 0.5) rotate(180deg);
    }
  }

  @-o-keyframes squareXL {
    0% {
      transform: scale(2, 0.5) rotate(0);
    }

    10% {
      transform: scale(1, 1) rotate(0);
    }

    42% {
      transform: scale(1, 1) rotate(90deg);
      bottom: 120rpx;
    }

    74% {
      transform: scale(1, 1) rotate(180deg);
    }

    75% {
      transform: scale(1, 1) rotate(180deg);
      bottom: 0;
    }

    95% {
      transform: scale(2, 0.5) rotate(180deg);
      bottom: -20rpx;
    }

    100% {
      transform: scale(2, 0.5) rotate(180deg);
    }
  }

  @keyframes squareXL {
    0% {
      transform: scale(2, 0.5) rotate(0);
    }

    10% {
      transform: scale(1, 1) rotate(0);
    }

    42% {
      transform: scale(1, 1) rotate(90deg);
      bottom: 120rpx;
    }

    74% {
      transform: scale(1, 1) rotate(180deg);
    }

    75% {
      transform: scale(1, 1) rotate(180deg);
      bottom: 0;
    }

    95% {
      transform: scale(2, 0.5) rotate(180deg);
      bottom: -20rpx;
    }

    100% {
      transform: scale(2, 0.5) rotate(180deg);
    }
  }

  @-moz-keyframes shadow {
    40% {
      transform: scale(0.5, 0.8);
    }
  }

  @-webkit-keyframes shadow {
    40% {
      transform: scale(0.5, 0.8);
    }
  }

  @-o-keyframes shadow {
    40% {
      transform: scale(0.5, 0.8);
    }
  }

  @keyframes shadow {
    40% {
      transform: scale(0.5, 0.8);
    }
  }
</style>

//页面中使用


<template>
    <PageLoading mask text="努力加载中……" ref="loadingRef"></PageLoading>
</template>

<script>
import PageLoading from '@/components/PageLoading/index.vue';
export default {
		components: {
			PageLoading,
		},
		data() {

        },
        onLoad() {
			uni.$on('loginNavToHome', () => {
				this.$refs.loadingRef.open();//打开组件
                this.$refs.loadingRef.close();//关闭组件
			})
		},
}
</script>

拿铁喝布丁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 全局封装loading加载教程(全局监听)
01-18
前言： 为了页面美观，请求接口的时候延迟没有数据，页面感觉狠卡顿，封装loading，请求接口成功后隐藏掉（我这是用的vant 组件根据自己情况进行改变）。 第一步： 建立loading.vue <template> <div class=loading> <van size=36px>加载中...</van> </div> </template> [removed] export default { props: {}, data() { return {}; }, computed: {}, created() {
vue单页应用包含loading封装prompt封装转场动画
08-10
vue单页应用，包含loading封装，prompt封装，转场动画！vue-resource vue-router 整合
Vue全局loading及错误提示的思路与实现
12-09
前言 近期项目马上上线，前两天产品提个需求，加个全局loading，我这半路出家的vue选手，有点懵逼，这玩意还是第一次，但是作为一个初级的前端切图仔，这个东西是必须会的，花了五分钟思考了一下，然后动键盘码出来 ，今天总结一下，与各位分享交流，有错误还请各位指出。 思路 我们项目请求使用的是axios，那么我们就在请求前后进行拦截，添加我们需要的东西，然后通信控制loading，通信方式我就不写了，有个老哥写的不错，可以去看看传送门 代码实现 首先对axios进行封装 如果你想进行全局错误提醒 也可以在拦截的代码进行操作 具体代码看下面 /** * axios 配置模块 * @m
Vue中的封装api
01-08
我做vue和react的项目都是用的这一套api（时间戳是我新加的），接口，方法分开，便于管理。 sever.js import axios from 'axios' import qs from 'qs' /** * 自定义实例默认值 */ const instance = axios.create({ timeout: 15000, // 请求超时时间 withCredentials: true }) /** * 添加请求拦截器 ，意思就是发起请求接口之前做什么事，一般都会发起加载一个loading */ instance.interceptors.request.use(
vue接口封装加载loading过渡效果
总结前端开发中遇到的问题，分享前端知识
06-05 927
loading过渡加载效果接口公共方法使用
使用vue封装一个全局loading...
nolanElio的博客
01-11 619
使用vue封装一个全局loading… 主要使用vuex状态管理来实现 loading.vue代码 <!--状态 图片 文字--> <template> <div v-if="msg.status"> <div class="mark"></div> <div class="load-container loading-box"> <img width="50px" height="50px"
Vue封装Axios实现全局的loading自动显示效果
Goaread的博客
03-13 2528
在 vue 项目中，我们通常会使用 Axios 库来与后台进行数据交互。而当我们发起 ajax 请求时，常常需要在页面上显示一个加载框（Loading 效果），然后等数据返回后自动将其隐藏。要实现这个功能，我们可以在每次请求前手动显示个加载框，等收到数据后又将其隐藏。但如果每个请求要都这么做，就略显麻烦。下面通过样例演示如何封装一个带 loading 效果的 Axios 组件，它能够对请求和响应进行拦截从而实现 loading 的自动显示与隐藏，并且在请求失败时自动弹出消息提示框显示错误信息。
vue封装全局loading
lhl_888888的博客
04-29 952
vue封装全局loading 第一步在components的文件夹下创建一个Global文件夹（文件夹名称可以随便起）在Global文件夹下创建一个index.js文件，如下图： 在index.js中写入以下代码： // 要将loading注册为全局组件 import Vue from 'vue' // 引入组件 import loading from'@/components/loading/loading' const createloading = Vue.extend(loading) // 实
vue-element 封装loading
m0_70265923的博客
03-21 435
【代码】vue-element 封装loading。
vue2实现数据请求显示loading图
12-29
这个，一般只需要在封装的axios中写入js事件即可。当然，我们首先需要在app.vue中，加入此图片。如下： <loading v-show=fetchLoading></loading> <router></router> [removed] import { mapGetters } ...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 622
步骤很详细，直接上教程……
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 362
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue项目中异步组件的引入使用
Niucode的博客
04-26 254
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 277
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 348
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 487
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
党务学习|基于SprinBoot+vue的大学生党务学习平台(源码+数据库+文档)
伟庭的博客
04-27 693
大学生党务学习平台管理系统按照操作主体分为管理员和用户。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。大学生党务学习平台管理系统可以提高大学生党务学习平台信息管理问题的解决效率，优化大学生党务学习平台信息处理流程，保证大学生党务学习平台信息数据的安全，它是一个非常可靠，非常安全的应用程序。大学生党务学习平台管理系统；入党申请,党课Mysql数据库；Java语言。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 587
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
vue报错：Do not mutate vuex store state outside mutation handlers.
weixin_44021888的博客
04-25 314
vue报错：Do not mutate vuex store state outside mutation handlers.
vue3 封装一个全局loading组件
05-20
好的，以下是一个简单的全局loading组件的封装示例： ```vue <div v-if="loading" class="loading"> <div class="spinner"></div> <div class="text">{{ text }} export default { name: 'GlobalLoading'...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值