龙空技术网

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

水冗水孚 260

前言:

眼前各位老铁们对“vue添加加载动画”可能比较看重,兄弟们都想要分析一些“vue添加加载动画”的相关资讯。那么小编同时在网摘上网罗了一些对于“vue添加加载动画””的相关文章,希望看官们能喜欢,兄弟们一起来学习一下吧!

需求描述

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

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

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

我们先看一下效果图:

代码实现

第一步,新建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

// 引入vueimport 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 ❤

标签: #vue添加加载动画