vue自定义加载指令最新详解

 更新时间:2022年06月07日 16:53:26   作者:水开泡茶  
这篇文章主要介绍了vue自定义加载指令的相关知识,主要包括创建加载组件,创建指令的方法,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下

前言

用过element-ui的都应该知道,里面有一个loading组件,有两种调用方法:指令和服务。但是只有一种加载效果,为了丰富加载效果和方便使用,于是写了一个自定义loading指令。

创建加载组件

首先,需要创建loading组件,展示需要的加载效果,因人而异,不再赘述。

创建指令

指令文件

首先,创建一个js文件用于书写自定义指令,在这个文件中导入Vueloading组件:

import Vue from 'vue'
import loading from './loading.vue'

创建构造器

主要是使用Vue.extend构造器,可以简单的理解为传入一个组件作为参数,然后返回该组件的类,可以使用这个类new出实例。

// loading组件作为参数传入
const loadingConstructor = Vue.extend(loading)

书写指令

在此之前,设定好指令的参数,在本人的项目中,参数有两种方式:1.传入一个布尔值,代表是否开启加载;2.传入一个对象,对象中包含是否开启遮罩、提示文字、加载背景颜色等属性,方便开发时,高度自定义laoding
指令的触发主要是在update中,该属性可接收一个函数,每次指令的参数改变时都会触发该函数,就是在这里判断开启或者关闭加载效果。 整体代码如下,附有详细注释:

const loadingDirective = Vue => {
  Vue.directive('custLoading', {
    /**
     * binding:
     * 1.可传单个参数,为布尔值;
     * 2.也可用json传多个参数{ loading, tip, background }
     *  2.1 loading { boolean } 是否开启遮罩
     *  2.2 tip { string } 提示文字
     *  2.3 background { string } 加载背景颜色
     * */
    // update: 参数变化时触发
    update: function (el, binding, vnode) {
      const value = binding.value
      let backup = {}
      // 判断参数类型,将参数都转换为对象,方便后续统一处理
      typeof value === 'boolean' ? (backup.loading = value) : (backup = value || {})
      // 取出所有的参数
      const { loading, tip, background } = backup
      // 根据loading参数判断开启或者关闭加载效果,开启和关闭函数后续会讲到
      loading ? createLoading(el, tip, background) : close(el?.customLoadingInstance?.$el)
    },
    // unbid: 指令卸载时触发
    unbind: function (el, binding) {
      const { loading } = binding.value || {}
      // 如果还在展示加载特效,则关闭
      loading && close(el?.customLoadingInstance?.$el)
    }
  })
}
export default loadingDirective

开启函数

在上面的指令中,当开启的参数为true时,回会调用一个createLoading函数用于将加载效果加入到指令挂载的元素上,具体思路如下:
1.在调用时,我们传入了三个参数给它,分别是挂载有自定义加载指令的元素、加载时的提示、加载背景颜色,详细可见上面的指令代码。
2.在执行之前,还需要进行判断当前的Vue实例是否运行在服务器上,如果是,此时不需要将加载效果展示出来;或者该元素之前是否已经带有加载特效,如果是的话,没必要在开启一次,不然到时会出现多层加载效果,既多余,又让页面显得混乱。
3.判断需要使用加载效果的元素是否还存在,不存在,则挂载到#main或者document.body上。
4.判断元素上是否存在定位或者其他条件,在本人的项目中,使用绝对定位来使加载效果铺满元素,因此需要进行判断,如果没有定位,则加上relative
5.使用loadingConstructor,创建loading实例,将实例作为子元素通过appendChild,放进需要展示的元素中,就可以展示出来;同时,在展示的元素上增加一个属性customLoadingInstance,用于记录当前的loading实例,方便后续的销毁。
整体代码如下:

const createLoading = (target, tip= '加载中,请稍候...', background) => {
  // 判断是否允许开启加载特效
  if (Vue.prototype.$isServer || target?.customLoadingInstance) return
  const mainEL = document.querySelector('#main')
  // 判断展示加载效果的元素是否存在
  const parentNode = target || mainEL || document.body
  // 判断父级是否存在定位,没有则添加定位
  const position = getComputedStyle(parentNode)?.position
  (!position || position === 'static') && (parentNode.style.position = 'relative')
  // 创建loading实例
  const instance = new loadingConstructor({
    el: document.createElement('div'),
    data: { background, tip, parentNodeWidth: parentNode.clientWidth, isShow: true }
  })
  // 注意:loading实例是一个Vue组件对象,真正的DOM放在实例的$el属性上
  parentNode.appendChild(instance.$el)
  parentNode.customLoadingInstance = instance
  
  return instance
}

关闭函数

有开启就得有结束,当开启的参数为false时,关闭加载效果。该函数接收loading实例的$el,其实就是加载效果的DOM元素,思路如下:
1.为了使加载组件看起来是逐渐消失的,不得在第一时间将加载效果的DOM元素删除,而是给它添加一个逐渐消失的动画,通过一个class设定。
2.设定动画消失时间,由loading组件内部实现在规定时间内,将整个加载效果执行完成或者淡出页面。也可省略此步骤,直接就将其移除。 之所以加入这个效果,是为了用户视觉上感受更好。
3.创建定时器,用于在加载效果消失时,删除加载效果的DOM元素。同2,也可直接移除。

const close = (target) => {
  if (!target) return
  // 添加逐渐消失的class
  target.className += ' custom-loading-disappear'
  // 获取loading实例
  const instance = target?.parentNode?.customLoadingInstance
  //  设定消失时间。
  instance?.$data?.dur && (instance.$data.dur = 0.8)
  // 设定定时器,用于在加载效果消失时,删除加载效果的`DOM`元素。
  let timer = setTimeout(() => {
    if (target && target.parentNode) {
      // 将customLoadingInstance 属性置为null,才不会干扰下一次开启
      target.parentNode.customLoadingInstance = null
      // 将加载效果的DOM元素移除
      target.parentNode.removeChild(target)
    }
    clearTimeout(timer)
    timer = null
  }, 1100)
}

到此这篇关于vue自定义加载指令的文章就介绍到这了,更多相关vue自定义加载指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

    vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

    说到h5的翻页,很定第一时间想到的是swiper。但是我当时想到的却是,vue里边怎么用swiper。这篇文章主要介绍了vue-awesome-swiper - 基于vue实现h5滑动翻页效果 ,需要的朋友可以参考下
    2018-11-11
  • vue在页面中如何使用window全局变量

    vue在页面中如何使用window全局变量

    这篇文章主要介绍了vue在页面中如何使用window全局变量问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue生成token并保存到本地存储中

    vue生成token并保存到本地存储中

    这篇文章主要介绍了vue生成token并保存到本地存储中,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • vue省市区三联动下拉选择组件的实现

    vue省市区三联动下拉选择组件的实现

    本篇文章主要介绍了vue省市区三联动下拉选择组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • vue中路由传参6种方式总结

    vue中路由传参6种方式总结

    这篇文章主要为大家详细介绍了vue中路由传参6种方式,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下
    2023-08-08
  • vue如何引入sass全局变量

    vue如何引入sass全局变量

    sass或者less都提供变量设置,在需求切换主题的项目中使用less或者sass变量,这篇文章主要介绍了vue引入sass全局变量,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • vue使用jsonp抓取qq音乐数据的方法

    vue使用jsonp抓取qq音乐数据的方法

    这篇文章主要介绍了vue使用jsonp抓取qq音乐数据的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • 详解vue中v-for和v-if一起使用的替代方法template

    详解vue中v-for和v-if一起使用的替代方法template

    这篇文章主要介绍了vue中v-for和v-if一起使用的替代方法template,使用的版本是vue 2.9.6和element-ui: 2.15.6,通过实例代码给大家讲解的非常详细,需要的朋友可以参考下
    2022-05-05
  • 前端大文件上传与下载(分片上传)的详细过程

    前端大文件上传与下载(分片上传)的详细过程

    最近遇见一个需要上传超大大文件的需求,所以下面这篇文章主要给大家介绍了关于前端大文件上传与下载(分片上传)的详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • vue + ele 实现下拉选择框和下拉多选选择框处理方案

    vue + ele 实现下拉选择框和下拉多选选择框处理方案

    这篇文章主要介绍了vue + ele 实现下拉选择框和下拉多选选择框处理方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08

最新评论