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

下面是详细讲解“vue使用Vue.extend方法仿写个loading加载中效果实例”的完整攻略：

1. Vue.extend方法简介

Vue.extend是Vue.js中一个全局API，它接受一个参数对象并返回一个新的组件构造函数，这个构造函数可以被像任何其它组件一样被实例化。

其主要作用是定义可复用的组件模板，这些模板可以在后面使用到。

2. 实现过程

下面演示一个简单的使用Vue.extend方法实现一个加载中效果的例子。

2.1 使用场景

在实际开发中，我们经常需要用到一个loading效果，用来提示用户正在加载中，这个效果可以用异步请求、路由切换等场景下。

2.2 实现思路

我们先定义一个全局组件，通过Vue.extend方法将组件注册到全局，在需要使用的地方通过组件标签进行使用。

2.2.1 编写loading组件

我们先来编写一个loading组件，这个组件将作为我们的全局组件：

<!-- template代码，注意，这里是markdown格式，应该使用```包裹代码 -->
<template>
  <div class="loading">
    <div class="loading-icon"></div>
  </div>
</template>

// javascript代码
<script>
export default {
  name: 'loading',
  mounted() {
    this.$nextTick(() => {
      this.initLoading();
    });
  },
  methods: {
    initLoading() {
      const icon = this.$el.querySelector('.loading-icon');
      let rotate = 0;
      const timer = setInterval(() => {
        rotate += 180;
        icon.style.transform = `rotate(${rotate}deg)`;
      }, 200);
      this.timer = timer;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>

<!-- CSS样式代码 -->
<style>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.2);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-icon {
  border: 4px solid #eee;
  border-right-color: #333;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  animation: rotate 2s infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

我们在模板中定义一个div，为其添加class为loading，并在其中再嵌套一个div，为其添加class为loading-icon，这个div将用来显示我们的loading效果。

组件逻辑比较简单，将loading-icon元素进行不断旋转，来显示加载中的效果。

2.2.2 注册loading组件

在全局中注册loading组件，我们在对应的vue文件中进行如下代码的编写：

import Vue from 'vue';
import Loading from './loading.vue';

const LoadingPlugin = Vue.extend(Loading);

LoadingPlugin.install = function(Vue) {
  Vue.prototype.$loading = function() {
    const instance = new LoadingPlugin().$mount();
    const appEl = document.querySelector('.app');
    appEl.appendChild(instance.$el);

    return instance;
  }
};

Vue.use(LoadingPlugin);

通过import引入loading的vue文件，然后通过Vue.extend方法来创建一个全局组件构造器，在这个构造函数中，我们先定义一个install方法，这个方法实现了在Vue.prototype上添加$loading方法的功能。

$loading方法作用为返回一个组件实例，并将其挂载到页面上。

我们将其挂载到父元素为.app的元素上，看下面的官网Dashboard的实现：

<template>
  <div class="app">
    <loading v-if="loading"></loading>
    ...
  </div>
</template>

<script>
...
methods: {
  fetchData() {
    this.loading = true;
    fetch('/api/data').then(response => {
      this.data = response.data;
      this.loading = false;
    });
  }
}
...
</script>

<style>
.app {
  ...
  position: relative;
}
</style>

可以看到，在app组件的模板中，我们添加了loading的组件标签，并传递了一个loading参数。

当loading参数为true时，加载中时我们就会看到一个loading效果。

到这里loading的实现就完成了。

3. 示例说明

下面通过两个示例来演示如何使用Vue.extend方法实现一个加载中效果的实例。

3.1 示例一

在Vue的create生命周期钩子中，添加isLoading和loadingText两个data：

<template>
  <div>
    <loading v-if="isLoading"></loading>
    <div>{{ loadingText }}</div>
  </div>
</template>

<script>
...
data() {
  return {
    isLoading: false,
    loadingText: '正在加载中...'
  }
},
created() {
  this.isLoading = true;
  setTimeout(() => {
    this.isLoading = false;
  }, 2000);
}
...
</script>

这个示例中，我们在created生命周期钩子中开启loading效果，并在两秒后关闭loading效果。

3.2 示例二

在路由的beforeEach生命周期钩子中，添加isLoading data：

<template>
  <div>
    <loading v-if="isLoading"></loading>
    ...
  </div>
</template>

<script>
...
data() {
  return {
    isLoading: false
  }
},
beforeRouteEnter(to, from, next) {
  this.isLoading = true;
  setTimeout(() => {
    this.isLoading = false;
    next();
  }, 2000);
}
...
</script>

这个示例中，我们在beforeEach生命周期钩子中开启loading效果，并在两秒后关闭loading效果。