使用vue中的vue.extend方法模拟加载效果

.loadindWrap{position:absolute;顶部：0；左：0；宽度：100%；高度：100%；显示：弹性；证明内容：居中；：中心;.loadingContent{颜色：rgb(160,233,66);文本对齐：居中；.iBox{底部边距：6px；我{字体大小：20px;color:#bfa}}/}/添加过渡effect.animation-enter,.animation-leave-to{opacity:0;}.animation-enter-active,.animation-leave-active{transition:opacity0.6s;}需求说明本篇我们使用vue的extend方法实现全屏加载效果。需求如下：可以通过命令打开或关闭弹出框，比如这个。$showDialog()打开，而this.$hideDialog()关闭。可以传参改变loading中的文字，也可以传参改变loading的背景颜色。当然，除了文字和背景颜色，你还可以传递更多的参数。具体可以根据业务场景设计，为了方便文章的理解，这里不再赘述。先来看看效果图：效果图的代码实现第一步是新建一个加载组件。比如我们在src目录下新建一个loading文件夹，用来存放loading相关的文件。该文件夹下新建的loading.vue文件用于Componentsrc/loading/loading.vue.loadindWrap{position:absolute;顶部：0；左：0；宽度：100%；高度：100%；显示：弹性；证明内容：居中；：中心;.loadingContent{颜色：rgb(160,233,66);文本对齐：居中；.iBox{底部边距：6px；我{字体大小：20px;color:#bfa}}/}/添加过渡effect.animation-enter,.animation-leave-to{opacity:0;}.animation-enter-active,.animation-leave-active{transition:opacity0.6s;}第二步，新建一个index.js文件。比如我们在src目录下新建的loading文件夹新建一个index.js文件来编写相应的js代码来控制加载弹框src/loading/index.js//IntroducevueimportVuefrom'vue'//Introduceloadingcomponentimportdialogfrom'./loading';//通过Vue的extend方法继承导入的dialog组件，继承后返回一个vue子类需要待实例化constDialog=Vue.extend(dialog);//创建一个实例并挂载到一个div上constapp=newDialog().$mount(document.createElement('div'))//打开pop-upfunctionfunctionshowDialog(options){//初始化调用传递的参数赋值，改变组件中的内部值for(letkeyinoptions){app[key]=options[key];}//让它显示app.showLoading=true//并将其插入正文document.body.appendChild(app.$el);}//关闭弹框函数functionhideDialog(){//因为它是v-if要控制，所以logo如果showLoading设置为false，弹框的dom会自动删除Vue.prototype.$showDialog=showDialog;Vue.原型.$hideDialog=hideDialog;第三步，在main.js中引入main.js//...//最后在main.js中必须引入，说明是用的，这样在任何组件中执行的方法都是import'./loading/index.js'newVue({render:h=>h(App),router,store//mountup}).$mount('#app')第四步，command公式调用在需要使用的组件中使用Vue.extend方法的理解我们知道，不管是哪种编程语言，都会或多或少的有封装、继承、多态的思想。Vue.extend方法是Vue的一种继承组件的方法。官方定义如下：使用基本的Vue构造函数创建一个“子类”。参数是一个包含组件选项的对象。构造函数也可以理解为一个类。既然是类，就可以实例化对象。extend方法可以实例化一个组件对象，这个组件对象拥有我们原来定义的loading.vue的所有属性和方法。所以我们把这个组件对象挂载到一个div上，让它有一个落地，也就是成为一个dom元素。最后，当我们需要弹框出现的时候，将这个dom元素插入到document对象中，不需要的时候删除。这样就实现了打开和关闭弹框的效果。?感谢阅读?