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自定义加载指令内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue 无限滚动加载指令实现方法

    也不存在什么加载咯, 就是一个判断滚动条是否到达浏览器底部了. 如果到了就触发事件,米到就不处理. 计算公式提简单的   底部等于(0) =  滚动条高度 - 滚动条顶部距离 - 可视高度.  反正结果就是0. 一.获取滚动条位置 class Scroll { static get top() { return Math.max(document.documentElement.scrollTop || document.body.scrollTop); } static get clientH

  • Vue自定义图片懒加载指令v-lazyload详解

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: <img v-lazyload="imageSrc" > imageSrc是要加载的图片的实际路径. 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块 export default (Vue , o

  • 实现一个简单的vue无限加载指令方法

    vue 中的自定义指令是对底层 dom 进行操作,下面以实现滚动到底部加载数据,实现无限加载来介绍如何自定义一个简单的指令. 无限加载的原理是通过对滚动事件的监听,每一次滚动都要获取到已滚动的距离,如果滚动的距离加上浏览器窗口高度,会大于等于内容高度,就触发函数加载数据. 先介绍不使用 vue 的情况如何实现无限加载. 不使用框架 首先是html: <!DOCTYPE html><html lang="en"> <head><meta char

  • vue使用自定义指令实现拖拽

    需求背景,工作中需要实现一个自定义打印模板的需求,能够实现单个及多个dom元素的同时拖拽,也能通过外部的input元素修改dom元素的样式.在npm和GitHub上找了各种已有的vue组件,不够灵活,效果都不是自己想要的 1.vue自定义指令 Vue.directive('dragx', (el, binding, vnode) => { // 默认参数 let defaultOpts = { dragDirection: 'n, e, s, w, ne, se, sw, nw, all', d

  • 实现一个Vue自定义指令懒加载的方法示例

    在项目中如果有大量的图片需要加载的时候,就可以考虑使用懒加载了,懒加载其实就是监听浏览器的滚动,当滚动到一定的范围的时候就将图片的真实路径赋给src,然后取消监听.实现的方法也比较简单,可以通过懒加载的插件实现,也可以手写,手写通过vue自定义指令来实现,一般情况自定义指令用的也不多,比较vue自带的就够用了,大型复杂的项目的可能用的多. 什么是图片懒加载 当我们向下滚动的时候图片资源才被请求到,这也就是我们本次要实现的效果,进入页面的时候,只请求可视区域的图片资源这也就是懒加载. 比如我们加载

  • Vue 自定义指令功能完整实例

    本文实例讲述了Vue 自定义指令功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令</title> <script type="text/javascript" src="https://cdn.bootcss.com/v

  • vue的自定义指令传参方式

    目录 自定义指令传参 指令 环境 传参方式 自定义指令动态参数 自定义指令传参 指令 在vue官网中,常用指令有v-model和v-bind,但是,如果我们需要对DOM元素进行底层操作,就需要用到自定义指令. 今天主要讲到传参的2种方式. 环境 vue2.3.3 node6.11.2 webpack2.6.1 传参方式 在main.js中定义一个指令. Vue.directive('zoom', {     bind: function (el, binding, vnode) {      

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

    目录 前言 创建加载组件 创建指令 指令文件 创建构造器 书写指令 开启函数 关闭函数 前言 用过element-ui的都应该知道,里面有一个loading组件,有两种调用方法:指令和服务.但是只有一种加载效果,为了丰富加载效果和方便使用,于是写了一个自定义loading指令. 创建加载组件 首先,需要创建loading组件,展示需要的加载效果,因人而异,不再赘述. 创建指令 指令文件 首先,创建一个js文件用于书写自定义指令,在这个文件中导入Vue和loading组件: import Vue

  • vue自定义加载指令v-loading占位图指令v-showimg

    目录 了解自定义指令的钩子函数 注册成为全局指令 需求描述 列表组件 ListCom.vue 加载动画组件 LoadingCom.vue 钩子函数 loading.js 分析上面的代码 main.js 中 注册成为全局指令 页面中使用加载动画指令 v-loading 占用图指令 v-showimg 占位图组件 ShowImgCom.vue 指令的书写 showimg.js main.js注册 指令的使用v-showimg指令 了解自定义指令的钩子函数 bind(){}:每当指令绑定到元素上的时候

  • vue+element树组件 实现树懒加载的过程详解

    一.页面样式 二.数据库 三.前端页面代码 <template> <el-tree :props="props" :load="loadNode" lazy show-checkbox> </el-tree> </template> <script> export default { data () { return { props: { label: 'name', children: 'zones',

  • vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)

    一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实现瀑布流,这里选择绝对定位方式: 关键问题:由于每张图片的宽高不一样,而瀑布流中要求所有图片的宽度一致,高度随宽度等比缩放.而且由于图片的加载是异步延迟.在不知道图片高度的情况下,每个图片所在的item盒子不好绝对定位.因此在渲染页面前先获取所有图片的高度,是解决问题的关键点!这里选择用JS中的Im

  • 基于Python实现配置热加载的方法详解

    目录 背景 如何实现 使用多进程实现配置热加载 使用signal信号量来实现热加载 采用multiprocessing.Event 来实现配置热加载 结语 背景 由于最近工作需求,需要在已有项目添加一个新功能,实现配置热加载的功能.所谓的配置热加载,也就是说当服务收到配置更新消息之后,我们不用重启服务就可以使用最新的配置去执行任务. 如何实现 下面我分别采用多进程.多线程.协程的方式去实现配置热加载. 使用多进程实现配置热加载 如果我们代码实现上使用多进程, 主进程1来更新配置并发送指令,任务的

  • JS图片懒加载库VueLazyLoad详解

    目录 背景 说明 实现原理 1. placeholder 的实现很细致和灵活 2. 添加图片缓存 3. 事件监听使用节流 4. 监听事件不止滚动事件 5. 事件列队的方式来处理懒加载 6. 支持 data-srcset 7. 自定义控制可视区的判定范围 待完善 1. 没有解决布局抖动 2. 跳过已经加载图片的判断方式 3. 局部懒加载 4. 性能不是很好 5. observer 模式配置简单 6. SEO 不友好 总结 背景 上篇<图片懒加载原理方案详解>中详细解析了图片懒加载的原理和方案.主

  • C#通过不安全代码看内存加载的示例详解

    目录 项目文件 值类型 自定义结构体 引用类型string 自定class类型 C#中类型分为值类型和引用类型,值类型存储在堆栈中,是栈结构,先进后出,引用类型存储在托管堆中.接下来用不安全代码的地址,来看一下值类型和引用类型的存储. 项目文件 C#中使用不安全代码需要在项目文件中添加AllowUnsafeBlocks配置. <Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <OutputType>E

  • mybatis xml文件热加载实现示例详解

    目录 引言 一.xml 文件热加载实现原理 1.1 xml 文件怎么样解析 1.2 实现思路 二.mybatis-xmlreload-spring-boot-starter 登场 2.1 核心代码 2.2 安装方式 2.3 使用配置 最后 引言 本文博主给大家带来一篇 mybatis xml 文件热加载的实现教程,自博主从事开发工作使用 Mybatis 以来,如果需要修改 xml 文件的内容,通常都需要重启项目,因为不重启的话,修改是不生效的,Mybatis 仅仅会在项目初始化的时候将 xml

  • mui上拉加载功能实例详解

    最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui/css/mui.min.css" rel="external nofollow" > <script src="js/jquery-3.2.0.min.js"></script> <script src="com

随机推荐