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

需求描述本文我们使用vue的extend方法实现一个全屏loading加载效果，需求如下：

通过命令就可以让弹框开启或关闭，比如this.$showDialog()开启，this.$hideDialog()关闭
方法可以传参更改loading中的文字
也可以传参更改loading背景色

当然这里除了文字，背景色什么的，也可以传递更多的参数，具体可以根据业务场景设计，为了便于理解文章这里就不赘述了。

我们先看一下效果图：
效果图

文章图片

代码实现第一步，新建loading组件
比如我们在src目录下，新建loading文件夹用于存放loading相关文件，在这个文件夹下新建的loading.vue文件是用来做弹出框的组件
src/loading/loading.vue

.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; }

第二步，新建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')

第四步，命令式调用
在需要使用的组件中使用

Vue.extend方法的理解我们知道，无论哪种程序语言，或多或少都会有封装、继承、多态的思想，而Vue.extend方法就是Vue的一个用于继承组件的方法。官方是这样定义的：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
构造器也可以理解为是一个类，既然是一个类，就可以去实例化对象，extend方法可以实例一个组件对象，而这个组件对象拥有我们最初定义的loading.vue所有属性和方法。所以我们将这个组件对象挂载到一个div上，让其有一个着落，即成为dom元素。
最终，当我们需要弹框出现的时候，把这个dom元素插入到文档对象上，不需要的时候，再将其删除掉。这样就实现了，打开和关闭弹框的效果。
【vue中使用Vue.extend方法仿写一个loading加载中效果】? thanks reading ?