前端优雅实现全局loading加载动画

前端

2024-01-20 03:22:54

使用 Vue.js、Element UI 和 Axios 实现全局 Loading 加载动画

背景

在现代前端开发中，用户体验至关重要。页面和数据加载速度快且无缝对于吸引和留住用户至关重要。Loading 加载动画可以为用户提供视觉反馈，让他们在等待数据加载时保持耐心。

Vue.js、Element UI 和 Axios 介绍

Vue.js: 一个流行的前端框架，以其易于学习和强大的功能著称。
Element UI: 一个基于 Vue.js 的 UI 组件库，提供了丰富的组件和样式。
Axios: 一个轻量级且易于使用的 HTTP 库，可以轻松发起 HTTP 请求和处理响应。

实现 Loading 加载动画

1. 安装和导入依赖项

npm install vue
npm install element-ui
npm install axios

在 Vue.js 项目中导入这些库：

import Vue from 'vue'
import ElementUI from 'element-ui'
import axios from 'axios'

Vue.use(ElementUI)

2. 创建自定义指令

创建一个名为 loading 的自定义指令，它会在发出 HTTP 请求时自动显示和隐藏 Loading 动画。

Vue.directive('loading', {
  bind: function (el, binding) {
    let loading = document.createElement('div')
    loading.classList.add('loading')
    loading.style.display = 'none'
    el.appendChild(loading)

    el.addEventListener('click', () => {
      loading.style.display = 'block'
      axios.get('https://jsonplaceholder.typicode.com/todos/1')
        .then(() => {
          loading.style.display = 'none'
        })
    })
  }
})

3. 在 Vue.js 模板中使用自定义指令

在 Vue.js 模板中，将 loading 指令添加到需要显示 Loading 动画的元素上。

<template>
  <div>
    <button v-loading>加载数据</button>
  </div>
</template>

示例代码

完整的示例代码如下：

import Vue from 'vue'
import ElementUI from 'element-ui'
import axios from 'axios'

Vue.use(ElementUI)

Vue.directive('loading', {
  bind: function (el, binding) {
    let loading = document.createElement('div')
    loading.classList.add('loading')
    loading.style.display = 'none'
    el.appendChild(loading)

    el.addEventListener('click', () => {
      loading.style.display = 'block'
      axios.get('https://jsonplaceholder.typicode.com/todos/1')
        .then(() => {
          loading.style.display = 'none'
        })
    })
  }
})

new Vue({
  el: '#app',
  template: `
    <div>
      <button v-loading>加载数据</button>
    </div>
  `
})