vue自定义loading

已于 2024-02-22 10:25:28 修改
阅读量480 收藏 6
点赞数 11
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2024-02-21 13:28:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43903629/article/details/136209127
版权

全屏loading效果

在这里插入图片描述

div v-loading loading效果

在这里插入图片描述

测试

<template>
  <div>
    <div v-loading="isLoading" style="width: 300px;height: 300px;">
      loading
    </div>
    <button @click="loading">loading</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isLoading: false
    };
  },
  created () { },
  computed: {},
  mounted () { },
  methods: {
    loading () {
      // this.$fullScreenLoading.open();
      // setTimeout(() => {
      //   this.$fullScreenLoading.close();
      // }, 3000);

      this.isLoading = true
      // setTimeout(() => {
      //   this.isLoading = false
      // }, 2000);

    },

  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>

指令方式

loading.css

// loading.css
.load-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(220, 220, 224, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
} 
.loader {
  font-size: 20px;
  margin: 5em auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load-animation 1.3s infinite linear;
  animation: load-animation 1.3s infinite linear;
}
@-webkit-keyframes load-animation {
  0%,
  100% {
    box-shadow: 0em -3em 0em 0.2em #1c28d3, 2em -2em 0 0em #1c28d3, 3em 0em 0 -0.5em #1c28d3, 2em 2em 0 -0.5em #1c28d3, 0em 3em 0 -0.5em #1c28d3, -2em 2em 0 -0.5em #1c28d3, -3em 0em 0 -0.5em #1c28d3, -2em -2em 0 0em #1c28d3;
  }
  12.5% {
    box-shadow: 0em -3em 0em 0em #1c28d3, 2em -2em 0 0.2em #1c28d3, 3em 0em 0 0em #1c28d3, 2em 2em 0 -0.5em #1c28d3, 0em 3em 0 -0.5em #1c28d3, -2em 2em 0 -0.5em #1c28d3, -3em 0em 0 -0.5em #1c28d3, -2em -2em 0 -0.5em #1c28d3;
  }
  25% {
    box-shadow: 0em -3em 0em -0.5em #1c28d3, 2em -2em 0 0em #1c28d3, 3em 0em 0 0.2em #1c28d3, 2em 2em 0 0em #1c28d3, 0em 3em 0 -0.5em #1c28d3, -2em 2em 0 -0.5em #1c28d3, -3em 0em 0 -0.5em #1c28d3, -2em -2em 0 -0.5em #1c28d3;
  }
  37.5% {
    box-shadow: 0em -3em 0em -0.5em #1c28d3, 2em -2em 0 -0.5em #1c28d3, 3em 0em 0 0em #1c28d3, 2em 2em 0 0.2em #1c28d3, 0em 3em 0 0em #1c28d3, -2em 2em 0 -0.5em #1c28d3, -3em 0em 0 -0.5em #1c28d3, -2em -2em 0 -0.5em #1c28d3;
  }
  50% {
    box-shadow: 0em -3em 0em -0.5em #1c28d3, 2em -2em 0 -0.5em #1c28d3, 3em 0em 0 -0.5em #1c28d3, 2em 2em 0 0em #1c28d3, 0em 3em 0 0.2em #1c28d3, -2em 2em 0 0em #1c28d3, -3em 0em 0 -0.5em #1c28d3, -2em -2em 0 -0.5em #1c28d3;
  }
  62.5% {
    box-shadow: 0em -3em 0em -0.5em #1c28d3, 2em -2em 0 -0.5em #1c28d3, 3em 0em 0 -0.5em #1c28d3, 2em 2em 0 -0.5em #1c28d3, 0em 3em 0 0em #1c28d3, -2em 2em 0 0.2em #1c28d3, -3em 0em 0 0em #1c28d3, -2em -2em 0 -0.5em #1c28d3;
  }
  75% {
    box-shadow: 0em -3em 0em -0.5em #1c28d3, 2em -2em 0 -0.5em #1c28d3, 3em 0em 0 -0.5em #1c28d3, 2em 2em 0 -0.5em #1c28d3, 0em 3em 0 -0.5em #1c28d3, -2em 2em 0 0em #1c28d3, -3em 0em 0 0.2em #1c28d3, -2em -2em 0 0em #1c28d3;
  }
  87.5% {
    box-shadow: 0em -3em 0em 0em #1c28d3, 2em -2em 0 -0.5em #1c28d3, 3em 0em 0 -0.5em #1c28d3, 2em 2em 0 -0.5em #1c28d3, 0em 3em 0 -0.5em #1c28d3, -2em 2em 0 0em #1c28d3, -3em 0em 0 0em #1c28d3, -2em -2em 0 0.2em #1c28d3;
  }
}
@keyframes load-animation {
  0%,
  100% {
    box-shadow: 0em -3em 0em 0.2em #1c28d3, 2em -2em 0 0em #1c28d3, 3em 0em 0 -0.5em #1c28d3, 2em 2em 0 -0.5em #1c28d3, 0em 3em 0 -0.5em #1c28d3, -2em 2em 0 -0.5em #1c28d3, -3em 0em 0 -0.5em #1c28d3, -2em -2em 0 0em #1c28d3;
  }
  12.5% {
    box-shadow: 0em -3em 0em 0em #1c28d3, 2em -2em 0 0.2em #1c28d3, 3em 0em 0 0em #1c28d3, 2em 2em 0 -0.5em #1c28d3, 0em 3em 0 -0.5em #1c28d3, -2em 2em 0 -0.5em #1c28d3, -3em 0em 0 -0.5em #1c28d3, -2em -2em 0 -0.5em #1c28d3;
  }
  25% {
    box-shadow: 0em -3em 0em -0.5em #1c28d3, 2em -2em 0 0em #1c28d3, 3em 0em 0 0.2em #1c28d3, 2em 2em 0 0em #1c28d3, 0em 3em 0 -0.5em #1c28d3, -2em 2em 0 -0.5em #1c28d3, -3em 0em 0 -0.5em #1c28d3, -2em -2em 0 -0.5em #1c28d3;
  }
  37.5% {
    box-shadow: 0em -3em 0em -0.5em #1c28d3, 2em -2em 0 -0.5em #1c28d3, 3em 0em 0 0em #1c28d3, 2em 2em 0 0.2em #1c28d3, 0em 3em 0 0em #1c28d3, -2em 2em 0 -0.5em #1c28d3, -3em 0em 0 -0.5em #1c28d3, -2em -2em 0 -0.5em #1c28d3;
  }
  50% {
    box-shadow: 0em -3em 0em -0.5em #1c28d3, 2em -2em 0 -0.5em #1c28d3, 3em 0em 0 -0.5em #1c28d3, 2em 2em 0 0em #1c28d3, 0em 3em 0 0.2em #1c28d3, -2em 2em 0 0em #1c28d3, -3em 0em 0 -0.5em #1c28d3, -2em -2em 0 -0.5em #1c28d3;
  }
  62.5% {
    box-shadow: 0em -3em 0em -0.5em #1c28d3, 2em -2em 0 -0.5em #1c28d3, 3em 0em 0 -0.5em #1c28d3, 2em 2em 0 -0.5em #1c28d3, 0em 3em 0 0em #1c28d3, -2em 2em 0 0.2em #1c28d3, -3em 0em 0 0em #1c28d3, -2em -2em 0 -0.5em #1c28d3;
  }
  75% {
    box-shadow: 0em -3em 0em -0.5em #1c28d3, 2em -2em 0 -0.5em #1c28d3, 3em 0em 0 -0.5em #1c28d3, 2em 2em 0 -0.5em #1c28d3, 0em 3em 0 -0.5em #1c28d3, -2em 2em 0 0em #1c28d3, -3em 0em 0 0.2em #1c28d3, -2em -2em 0 0em #1c28d3;
  }
  87.5% {
    box-shadow: 0em -3em 0em 0em #1c28d3, 2em -2em 0 -0.5em #1c28d3, 3em 0em 0 -0.5em #1c28d3, 2em 2em 0 -0.5em #1c28d3, 0em 3em 0 -0.5em #1c28d3, -2em 2em 0 0em #1c28d3, -3em 0em 0 0em #1c28d3, -2em -2em 0 0.2em #1c28d3;
  }
}

Loading.vue

<template>
  <div v-show="visible" class="load-container">
    <div class="loader"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false
    };
  },
  created () { },
  computed: {},
  mounted () { },
  methods: {}
};
</script>
<style scoped>
/* @import url(); 引入css类 */
@import url(./loading.css);
</style>

loading/index.js

import Vue from 'vue'
import Loading from './Loading'

const LoadingComponent = Vue.extend(Loading)

const toggleLoading = (el, binding) => {
  if (binding.value) {
    Vue.nextTick(() => {
      // 控制loading组件显示
      el.instance.visible = true
      // 插入到目标元素
      insertElement(el, el, binding)
    })
  } else {
    el.instance.visible = false
  }
}

const insertElement = (parent, el) => {
  // 给父元素加个定位，让loading元素定位
  el.style.position = 'relative';
  parent.appendChild(el.loadingComponent)
}

export default {
  /**
   * 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
   * @param {*} el 
   * @param {*} binding 
   * @param {*} vnode 
   */
  bind: function (el, binding, vnode) {
    const loadingComponent = new LoadingComponent({
      el: document.createElement('div'),
      data () { }
    })
    el.instance = loadingComponent
    el.loadingComponent = loadingComponent.$el
    el.loadingComponentStyle = {}
    binding.value && toggleLoading(el, binding)
  },
  update: function (el, binding) {
    if (binding.oldValue !== binding.value) {
      toggleLoading(el, binding)
    }
  },
  /**
   * 只调用一次，指令与元素解绑时调用。
   * @param {*} el 
   * @param {*} binding 
   */
  unbind: function (el, binding) {
    el.style.position = '';
    el.instance && el.instance.$destroy()
  }
}

directives/index.js

import loading from './loading';
export default {
  install (Vue) {
    // 全局loading
    Vue.directive("loading", loading)
  }
}

引入指令

//引入插件
import Loading from './directives '
Vue.use(Loading);

插件方式

plugins/loading.js


import Loading from './Loading'

export default {
  install (Vue) {

    const LoadingComponent = Vue.extend(Loading)

    const toggleLoading = (el, binding) => {
      if (binding.value) {
        Vue.nextTick(() => {
          // 控制loading组件显示
          el.instance.visible = true
          // 插入到目标元素
          insertElement(el, el, binding)
        })
      } else {
        el.instance.visible = false
      }
    }

    const insertElement = (parent, el) => {
      // 给父元素加个定位，让loading元素定位
      el.style.position = 'relative';
      parent.appendChild(el.loadingComponent)
    }
    //添加指令
    Vue.directive('loading', {
      /**
       * 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
       * @param {*} el 
       * @param {*} binding 
       * @param {*} vnode 
       */
      bind: function (el, binding, vnode) {
        const loadingComponent = new LoadingComponent({
          el: document.createElement('div'),
          data () { }
        })
        el.instance = loadingComponent
        el.loadingComponent = loadingComponent.$el
        el.loadingComponentStyle = {}
        binding.value && toggleLoading(el, binding)
      },
      update: function (el, binding) {
        if (binding.oldValue !== binding.value) {
          toggleLoading(el, binding)
        }
      },
      /**
       * 只调用一次，指令与元素解绑时调用。
       * @param {*} el 
       * @param {*} binding 
       */
      unbind: function (el, binding) {
        el.style.position = '';
        el.instance && el.instance.$destroy()
      }

    })
  }
}

引入插件

//引入插件
import Loading from './plugins/loading.js '
Vue.use(Loading );

全屏loading

/**
 * 自定义FullScreenLoading
 */
const FullScreenLoading = {
  show: false,
  component: null
}

export default {
  install (Vue) {
    Vue.prototype.$fullScreenLoading = function (text = '正在加载中...', type) {
      if (type === 'close') {
        FullScreenLoading.component.show = FullScreenLoading.show = false;
      } else {
        if (FullScreenLoading.show) {
          return
        }
        /**
         * Vue构造器，创建一个“子类”，参数是一个包含组件选项的对象，其中,data选项中必须是函数
         * Vue.extend通常和Vue.extend + $mount()
         */
        let FullScreenLoadingComponent = Vue.extend({
          data: function () {
            return {
              show: FullScreenLoading.show
            }
          },
          template: `<div class="fullScreenLoading-container" v-show="show"><div  class="fullScreenLoading">${text}</div></div>`
        })
        FullScreenLoading.component = new FullScreenLoadingComponent()
        let element = FullScreenLoading.component.$mount().$el
        document.body.appendChild(element)
        FullScreenLoading.component.show = FullScreenLoading.show = true
      }
    };
    // 添加实例方法
    ['open', 'close'].forEach(type => {
      Vue.prototype.$fullScreenLoading[type] = (text) => Vue.prototype.$fullScreenLoading(text, type);
    });

  }
}

引入全屏插件

//引入插件
import './plugins/fullScreenLoading.css'
import fullScreenLoading from './plugins/fullScreenLoading'
Vue.use(fullScreenLoading);
一只散修道友
关注
  • 11
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS | 组件之loading动画适配屏幕尺寸
闫小样的博客
01-28 702
loading组件 我们在做项目的过程中尤其是跳转页面和请求接口的时，经常需要对页面的跳转进行优化，让跳转页面和接口请求数据显得更加平滑，体验效果更好。所以loading组件就产生了。 此代码适配于屏幕尺寸大小，所以可以直接使用。总结代码如下： CSS #mark-bg { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 1000; } #mark-bg .container {
自定义vue的loading插件
08-12
本插件用于vue2.x,自定义了一个钩子(asyncMethods)(会自动合并进methods钩子)，用来放置异步函数可以获取各种接口请求，异步函数的loading状态，配合其他更具状态显示loading的组件（例如elementui的v-loading指令）...
vue自定义指令v-loading（vue2和vue3)
weixin_58031521的博客
02-16 1万+
vue实现自定义指令v-loading（包含vue2及vue3的写法）
vue项目中，设置页面局部loading加载效果（element）v-loading
最新发布
大哥的博客
08-21 3547
vue项目中，设置页面局部loading加载效果（element）v-loading
v-loading
weixin_42594143的博客
03-08 487
使用v-loading在接口为请求到数据之前，显示加载中，直到请求到数据后消失。
教你用vue自定义指令做一个组件的遮罩层loading效果
球球不吃虾WHR2349博客
09-24 2822
时间有限，不上图了。 <div class="w-box-connent" v-whr-loading="isloading"></div> 大概意思就是，有一个div，当isloading==true时候我要给这个div上面蒙上一层遮罩层。 Vue.directive('whr-loading', { bind(el, bindingvnode, vnode) { let divzhezhao = document.createElemen
Vue自定义全局Toast和Loading的实例详解
10-17
主要介绍了Vue自定义全局Toast和Loading,需要的朋友可以参考下
VUE-ElementUI 自定义Loading图操作
01-21
虽然文档中有些， element-loading-spinner=”el-icon-loading” 可指定自定义图 但经测试，也只是只能再elementui 图标库中的图， 不是我们想的那个自定义图类的意思。 自定义图方法： 1） 添加自定义elementUI ...
vue自定义全局css样式loading组件.zip
04-16
vue自定义全局css样式loading组件，1、不用gif图片，直接用css样式实现进度条效果 2、用js文件将组件vue进行封装，封装两个全局方便，打开和关闭 3、main.js引用定义的js文件，实现全局引用
vue使用vue-lazyload图片懒加载并且设置loading大小
u012500054的博客
06-03 6821
npm install vue-lazyload --save import { VueLazyload } from 'vue-lazyload' vue.use(VueLazyload, { preLoad: 1.3, attempt: 2, error: require('../img/icons/error.png'), loading: require('../img/icons/loading.png') // 注意路径使用require（我这里使用相对路径） }) // img使用v
v-loading在可变高度元素上使用(超出父级元素时，loading遮罩未完全覆盖)
weixin_42646650的博客
08-18 560
父级元素设置overflow:auto;子级元素高度超过父级元素时，子级元素滚动到上方，调用loading,此时loading遮罩未完全覆盖。v-loading 参数。
v-loading 效果
weixin_53165181的博客
10-24 233
【代码】v-loading 效果。
Vue进阶（六十一）：v-loading 实现加载效果及elementUI 中 el-date-picker中弹出的日期和时间的输入框设置为只读
热门推荐
IT全栈 华强工作室
07-11 5万+
在项目开发过程中，需要使用el-date-picker日期控件，需求是elementUI 中 el-date-picker中弹出的日期和时间的输入框设置为只读。在接口未请求到数据之前，显示加载中，直到请求到数据后消失。下的顶层元素上的话，就不会触发全屏。在接口的回调函数中，将。，到达加载动画效果。
vue实用组件Loading，自定义样式
HHyuang的博客
09-22 904
解：当进程还在执行，还没有执行完成的时候，用户可能并不知道，那么我们是不是应该提示用户，那怎么样才能更让客户客观的看到正在执行，而且又有一点高级感呢？那就是LoadIng组件了，我elementui的基础上修改了他的样式。完成，年轻的程序员，大佬勿喷，希望对大家有用，有问题可以留言。1.我为什么用到了组件Loading是干什么的？vue laoding组件。
【Loading动画样式】Vue Scss实现的两种Loading动画样式
m0_64494670的博客
06-09 377
依赖scss实现两种Loading动画效果，喜欢拿去
Vue与ElementUI的v-loading控件
SDKL_YI的博客
07-13 4400
Vue与ElementUI的v-loading控件
vue各种加载loading集合
Embrace924的博客
02-17 990
1. 普通旋转加载效果 代码： <template> <button data-label="do it!" class="loading">do it! </button> </template> <script> export default { name: 'loader...
vue+element-ui给全局请求设置一个loading样式
qq_43807473的博客
08-05 2283
老项目后台管理，要在每个页面请求的时候都添加一个loading，为了统一和防止一个页面多次请求页面出现闪烁的情况同意在request.js中添加了一个全局loading。2.loading出现后设置一个最短时间，防止请求立马响应回来，页面闪烁一下。多个请求时不添加多个loading效果。大概就这这么写的，当然最重要的还是根据自己的项目需求来做适当的改变。1.在请求的时候创建一个loading样式，请求结束是关闭。
vue 设置自定义loading组件的层级最高
04-22
关于您的问题，如果想要设置 Vue 自定义 loading 组件的层级最高，可以在组件模板中添加一个 div 元素作为容器，并设置该元素的 CSS 属性 position 和 z-index，例如： ```html <div class="loading-container">...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值