关于vue.js:vue中使用Vueextend方法仿写一个loading加载中效果

需要形容

本文咱们应用 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

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