vue中使用Vue.extend方法仿写一个loading加载中效果

简介: vue中使用Vue.extend方法仿写一个loading加载中效果

需求描述

本文我们使用vue的extend方法实现一个全屏loading加载效果

  • 通过命令就可以让弹框开启或关闭,比如this.$showDialog()开启,this.$hideDialog()关闭
  • 方法可以传参更改loading中的文字
  • 也可以传参更改loading背景色
当然这里除了文字,背景色什么的,也可以传递更多的参数,具体可以根据业务场景设计,为了便于理解文章这里就不赘述了。

我们先看一下效果图:

效果图

loading.gif

代码实现

第一步,新建loading组件

比如我们在src目录下,新建loading文件夹用于存放loading相关文件,在这个文件夹下新建的loading.vue文件是用来做弹出框的组件

src/loading/loading.vue

<template>
  <!-- 打开弹框的动画 -->
  <transition name="animation">
    <div
      class="loadindWrap"
      v-if="showLoading"
      :style="{ background: backgroundColor }"
    >
      <div class="loadingContent">
        <div class="iBox">
          <i class="el-icon-loading"></i>
        </div>
        <div class="text">{{ text }}</div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      showLoading: false, // 控制显示与隐藏的标识
      backgroundColor: "rgba(0, 0, 0, 0.5)", // 默认背景色
      text: "加载中...", // 默认文字
    };
  },
};
</script>

<style lang="less" scoped>
.loadindWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .loadingContent {
    color: rgb(160, 233, 66);
    text-align: center;
    .iBox {
      margin-bottom: 6px;
      i {
        font-size: 20px;
        color: #bfa;
      }
    }
  }
}
// 加一个过渡效果
.animation-enter, .animation-leave-to { opacity: 0;}
.animation-enter-active, .animation-leave-active { transition: opacity 0.6s; }
</style>

第二步,新建index.js文件

比如我们在src目录下,新建的loading文件夹中再新建一个index.js文件用来书写相应js代码,用于控制loading弹框。

src/loading/index.js

// 引入vue
import Vue from 'vue'

// 引入loading组件
import dialog from './loading';

// 通过Vue的extend方法继承这个引入的dialog组件,继承后会返回一个vue子类,需要使用实例化即可
const Dialog = Vue.extend(dialog);

//创建实例并且挂载到一个div上
const app = new Dialog().$mount(document.createElement('div'))

// 打开弹框函数
function showDialog(options) {
    //初始化调用传递过来的参数赋值更改组件内内部值
    for (let key in options) {
        app[key] = options[key];
    }
    // 让其显示
    app.showLoading = true
    // 并将其插入body中
    document.body.appendChild(app.$el);
}

// 关闭弹框函数
function hideDialog() {
    // 因为是v-if去控制,所以将标识showLoading置为false,就会自动把弹框dom删掉
    app.showLoading = false
}

// 将打开函数和关闭函数都挂载到Vue原型上,方便我们调用
Vue.prototype.$showDialog = showDialog;
Vue.prototype.$hideDialog = hideDialog;

第三步,在main.js中引入之

main.js

// ...

// 最后要在main.js中引入,表示使用之,这样在任意组件中都可以执行对应方法了
import './loading/index.js'

new Vue({
  render: h => h(App),
  router,
  store // 挂载上去
}).$mount('#app')

第四步,命令式调用

<template>
  <div class="aBox">
    <el-button @click="show">点击出现加载中弹框</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    // 通过指令的方式即可调用,很方便
    show() {
      this.$showDialog({
        text: "浏览器在加载中哇...",
      });
      // 模拟发请求,过了1.5秒钟再将其关闭
      setTimeout(() => {
        this.$hideDialog();
      }, 1500);
    },
  },
};
</script>

Vue.extend方法的理解

我们知道,无论哪种程序语言,或多或少都会有封装、继承、多态的思想,而Vue.extend方法就是Vue的一个用于继承组件的方法。官方是这样定义的:使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

构造器也可以理解为是一个类,既然是一个类,就可以去实例化对象,extend方法可以实例一个组件对象,而这个组件对象拥有我们最初定义的loading.vue所有属性和方法。所以我们将这个组件对象挂载到一个div上,让其有一个着落,即成为dom元素。

最终,当我们需要弹框出现的时候,把这个dom元素插入到文档对象上,不需要的时候,再将其删除掉。这样就实现了,打开和关闭弹框的效果。

❤ thanks reading ❤

相关文章
|
5天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
5天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
5天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
10天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
10天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
11天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
11天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
11天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
12天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
10天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉