Element如何实现loading的方法示例

目录
  • 前言
  • 使用 loading 的几种方式
  • loading 指令实现
    • 指令
    • 通过指令来创建 loading
  • 代码实现
    • directive
    • 创建 loading 实例
  • loading 动画
  • 其他 loading 使用方式
    • 编程式使用
    • 组件式使用
  • 总结

前言

互联网时代,网络“提速”日益频繁,人们打开Web或软件的速度越来越快。然而在某些情况下,难免会出现需要用户等待的时候。那么,在这种情况下,美观,有趣,又实用的加载动画,不仅能够有效地减缓用户负面情绪,让用户挺留更长的时间。

使用 loading 的几种方式

使用 loading 的方式:

组件式

<van-loading />

指令式

<div v-loading="loading" ></div>

编程式

loading({
   text: '加载中'
})

loading 指令实现

指令

注册 loading 指令

app.directive('focus', {
    mounted(el, binding) {},
    // ... other hooks
})

使用指令

<div v-loading="isShow" >/** content **/ </div>

指令的作用:
自定义指令就是一个定义了一些 Hooks 的对象,这些 Hooks 接受绑定 DOM(这里指的是div)、binding参数等参数。在这些 Hooks 可以进行一些 DOM 层的操作,来复用一些公共逻辑。
directive 具体使用参考

通过指令来创建 loading

思路:

  • loading 提示时创建一个 loading 组件,将它的 DOM 插入到文档中。
  • 关闭 loading 时,将 loading 对应的 DOM 从文档中移除。

来看下流程

代码实现

查看 Element 源码 packages/loading/src/directive

directive

const vLoading = {
  mounted(el, binding) {
    if(!!binding.value){
      createInstance(el, binding) // 创建 loading 组件并插入到文档中
    }
  },
  updated(el, binding) {
    const instance = el.instance // 以创建的组件实例
    if (binding.oldValue !== binding.value) {
      if(binding.value) { // value 从 false -> true 时触发
        createInstance(el, binding)
      } else {
        instance.close() // 移除 loading 组件挂载的 DOM
      }
    }
  },
  unmounted(el) {
    el?.instance?.close() // 移除 loading 组件挂载的 DOM
  },
}

创建 loading 实例

createInstance 创建 loading 实例

const createInstance = (el, binding) => {
  // 通过绑定 DOM 的自定义属性来设置 loading 的相关参数
  const textExr = el.getAttribute('element-loading-text')
  const spinnerExr = el.getAttribute('element-loading-spinner')
  const backgroundExr = el.getAttribute('element-loading-background')
  const customClassExr = el.getAttribute('element-loading-custom-class')
  const vm = binding.instance
  el.instance = Loading({
    text: vm && vm[textExr] || textExr,
    spinner: vm && vm[spinnerExr] || spinnerExr,
    background: vm && vm[backgroundExr] || backgroundExr,
    customClass: vm && vm[customClassExr] || customClassExr,
    fullscreen: !!binding.modifiers.fullscreen,
    target: !!binding.modifiers.fullscreen ? null : el,
    body: !!binding.modifiers.body,
    visible: true,
    lock: !!binding.modifiers.lock,
  })
}

Loading

const Loading = function (options: ILoadingOptions = {}): ILoadingInstance {
  // 覆盖默认配置
  options = {
    ...defaults,
    ...options,
  }
  // 支持选择器
  if (typeof options.target === 'string') {
    options.target = document.querySelector(options.target) as HTMLElement
  }
  // 或者直接传递一个 DOM
  options.target = options.target || document.body
  // loading 插入的父元素
  const parent = options.body ? document.body : options.target
  options.parent = parent
  // loading 组件
  const instance = createLoadingComponent({
    options,
    globalLoadingOption,
  })
  // loading 插入到父元素中
  parent.appendChild(instance.$el)
  // 返回 loading 实例
  return instance
 }

createLoadingComponent

export function createLoadingComponent({
  options,
  globalLoadingOption,
}: ILoadingCreateComponentParams): ILoadingInstance {
  let vm: VNode = null
  const data = reactive({
    ...options,
    visible: false, // 控制 loading 是否展示
  })

  function setText(text: string) {
    data.text = text
  }
  function close(){
    data.visible = false
  }

  const componentSetupConfig = {
    ...toRefs(data),
    setText,
    close,
    handleAfterLeave,
  }
  // loading 组件
  const elLoadingComponent = {
    name: 'ElLoading',
    setup() {
      return componentSetupConfig
    },
    render() {
        return h(Transition, {
                name: 'el-loading-fade',
              }, {
                // withDirectives 使用指令
                default: withCtx(() => [withDirectives(createVNode('div', {
                    // ... loading 动画
                    // v-show 指令,使用 visible 作为控制变量
                }),[[vShow, this.visible]])]),
        })
    }
  }

  vm = createVNode(elLoadingComponent)
  // 将 vnode patch 挂载到指定容器上, vnode 转换为真正的 DOM
  render(vm, document.createElement('div'))
  return {
    ...componentSetupConfig,
    vm,
    get $el() {
      return vm.el as HTMLElement
    },
  }
}

loading 动画

elLoadingComponent 的 loading 组件是通过 svg + css animation 实现的。

<svg class="loading" version="1.1" xmlns="http://www.w3.org/2000/svg" width='50' height='50'>
   <circle class="circle" cx="25" cy="25" r="20" fill="none" stroke-width="2"  stroke="#000"/>
</svg>

涉及 stroke-dasharray 设置点划线实虚线的间距,以及 stroke-dashoffset设置起始位置,具体代码查看下面的demo代码。

loading codepen

其他 loading 使用方式

编程式使用

编程式调用和指令,他们的核心逻辑是相同的,

  • 指令需要通过绑定 DOM 上自定义属性或者指令参数拿到 loading 的参数,并在对应的 Hooks 中调用创建 loading 动画
  • 编程式调用时候,这些参数就可以直接传递给创建 loading 组件的函数。

组件式使用

定义的 elLoadingComponent 通过 props 来控制 loading 的展示。

总结

主要分析了如何通过 vue directive 实现 loading 的复用。包括了如何使用 loading 的三种方式,其中核心的逻辑是相同的渲染loading 组件,我们可以通过组件、编程式、指令将 loading 组件的DOM 插入到我们指定的挂载元素上。

到此这篇关于Element如何实现loading的方法示例的文章就介绍到这了,更多相关Element loading内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vuex+axios+element-ui实现页面请求loading操作示例

    本文实例讲述了vuex+axios+element-ui实现页面请求loading操作.分享给大家供大家参考,具体如下: 前言 我们在平常写项目的时候,发请求的时候肯定会习惯用一个 loading 遮罩层来防止用户在没拿到数据之前误操作 如果是页面同时只发送一个请求,那么无论是在组件中或者是在 axios 插件中进行请求和响应拦截都可以做到 但是,当一个页面同时要发送多个请求的时候,这么做显然就不行了 因为最先完成的请求会把所有请求的 loading 都给关闭 举个例子,第一个请求的响应时间为

  • vue+axios+element ui 实现全局loading加载示例

    实现全局loading加载 分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单 对不对? import axios from 'axios'; import { Message, Loading } from 'element-ui'; import Cookies from 'js-cookie'; import router from '@/router/index' let loading //定义loading变量 function st

  • 基于vue+element实现全局loading过程详解

    项目中使用的是vue+element实现的全局loading 1.引入所需组件,这里主要就是router和element组件,element组件引入可以参考element官网 2.下面就是重点及代码实现了 首先是全局的一个变量配置参数,代码如下: //全局页面跳转是否启用loading export const routerLoading = true; //全局api接口调用是否启用loading export const apiLoading = true; //loading参数配置 ex

  • vue-element-admin 全局loading加载等待

    最近遇到需求: 全局加载loading,所有接口都要可以手动控制是否展示加载等待的功能 百度了一下,发现好多是写在拦截器内的,在拦截器内调用element ui的loading方法,在接口请求的时候开始启动加载loading,在接口返回和接口报错抛异常的时候关闭loading 在这个思路上改动了一下,因为和我的需求有一点不同,我们的需求是可以手动控制是否展示加载等待的功能,既然是手动控制那么肯定不能直接在拦截器里面才开始调用loading方法了,往前推一步,在调接口的时候就开始控制是否启用loa

  • VUE-ElementUI 自定义Loading图操作

    需求: element ui loading图只能使用自己的loading图, 但很多场景下,需要替换成自己的gif图 虽然文档中有些, element-loading-spinner="el-icon-loading" 可指定自定义图 但经测试,也只是只能再elementui 图标库中的图, 不是我们想的那个自定义图类的意思. 自定义图方法: 1) 添加自定义elementUI loading样式 asserts下 新建CSS文件夹 及CSS文件比如myCss.css 再里面,写入自

  • 用Axios Element实现全局的请求loading的方法

    背景 业务需求是这样子的,每当发请求到后端时就触发一个全屏的 loading,多个请求合并为一次 loading. 现在项目中用的是 vue .axios.element等,所以文章主要是讲如果使用 axios 和 element 实现这个功能. 效果如下: 分析 首先,请求开始的时候开始 loading, 然后在请求返回后结束 loading.重点就是要拦截请求和响应. 然后,要解决多个请求合并为一次 loading. 最后,调用element 的 loading 组件即可. 拦截请求和响应

  • Element如何实现loading的方法示例

    目录 前言 使用 loading 的几种方式 loading 指令实现 指令 通过指令来创建 loading 代码实现 directive 创建 loading 实例 loading 动画 其他 loading 使用方式 编程式使用 组件式使用 总结 前言 互联网时代,网络“提速”日益频繁,人们打开Web或软件的速度越来越快.然而在某些情况下,难免会出现需要用户等待的时候.那么,在这种情况下,美观,有趣,又实用的加载动画,不仅能够有效地减缓用户负面情绪,让用户挺留更长的时间. 使用 loadin

  • vue+elementUI实现内嵌table的方法示例

    在大四实习工作中碰到一个比较特别的需求,要求在一个 table 表格中点击一条数据的编号,在该条数据下方出现一个新的 table 表格.这个需求在 element UI 的官方文档中也有案例,以下是参考了其他博客(找不到博客地址了)和 element UI 之后的最终实现效果. 效果图 不知道是公司电脑比较拉,还是软件问题导致录制出来的动态图很卡,但是在实际操作并不会卡. 代码: 页面显示代码: 主要代码在于 <el-table-column type="expand" widt

  • vue+element实现手机号验证码注册的示例

    很全的PC端手机端适配!一个项目多个域名我试了代理跨域本地运行可以打包上传不行,然后就用全地址,后端哪里要设置域名白名单!直接上图和完整代码!觉得可以就点个赞吧,谢谢! 代码: <template> <div> <div class="register_box" v-for="img in imageList" :key="img" v-lazy:background-image="img">

  • python 3利用BeautifulSoup抓取div标签的方法示例

    前言 本文主要介绍的是关于python 3用BeautifulSoup抓取div标签的方法示例,分享出来供大家参考学习,下面来看看详细的介绍: 示例代码: # -*- coding:utf-8 -*- #python 2.7 #XiaoDeng #http://tieba.baidu.com/p/2460150866 #标签操作 from bs4 import BeautifulSoup import urllib.request import re #如果是网址,可以用这个办法来读取网页 #h

  • JQuery+Bootstrap 自定义全屏Loading插件的示例demo

    JQuery+Bootstrap 自定义全屏Loading插件 /** * 自定义Loading插件 * @param {Object} config * { * content[加载显示文本], * time[自动关闭等待时间(ms)] * } * @param {String} config * 加载显示文本 * @refer 依赖 JQuery-1.9.1及以上.Bootstrap-3.3.7及以上 * @return {KZ_Loading} 对象实例 */ function KZ_Lo

  • 编译安装redisd的方法示例详解

    安装方法: yum安装 查看yum仓库redis版本 [root@centos ~]# yum list redis Loaded plugins: fastestmirror, langpacks Loading mirror speeds from cached hostfile Available Packages redis.x86_64 3.2.12-2.el7 myepel yum安装 [root@centos ~]# yum install redis -y 启动服务并设为开机启动

  • @Validated验证List集合的方法示例

    在开发时发现,@Validated只能验证单个实体类,在验证List集合时则不生效 @PostMapping(value="/test") public ApiResult getRepaymentPlan(@RequestBody @Validated List<Test> repaymentPlanVOs){ } 经过查资料得知,@valid是可以使用的,我们自定义一个ValidList类来替换List就可以达到验证的目的,话不多说,直接看代码 public class

  • Element Cascader 级联选择器的使用示例

    组件-级联选择器 基础用法 <div class="block"> <span class="demonstration">默认 click 触发子菜单</span> <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader> </

  • element-ui点击查看大图的方法示例

    element-ui图片(查看大图),可通过 previewSrcList 开启预览大图的功能. 写在element-ui表格中,使用作用域插槽循环图片 <!-- template插槽 --> <template slot-scope="scope"> <div class="demo-image__preview"> <el-image style="width: 100%; height: 100%"

随机推荐