时间戳

首页 > 解决方案 > 用于简单 Vue.js 项目的自定义微调器加载器

javascript - 用于简单 Vue.js 项目的自定义微调器加载器

问题描述

我在 codesandbox.io 上有一个简单的 vue 项目，带有 vue-router 和自定义微调器加载。

微调器.vue：

<template>
  <div class="spinner" v-show="loading">
    <span class="sync" v-bind:style="[spinnerStyle, spinnerDelay1]"></span>
    <span class="sync" v-bind:style="[spinnerStyle, spinnerDelay2]"></span>
    <span class="sync" v-bind:style="[spinnerStyle, spinnerDelay3]"></span>
  </div>
</template>
<script>
export default {
  name: "Spinner",
  props: {
    loading: {
      type: Boolean,
      default: true
    },
    color: {
      type: String,
      default: "#5dc596"
    },
    size: {
      type: String,
      default: "15px"
    },
    margin: {
      type: String,
      default: "2px"
    },
    radius: {
      type: String,
      default: "100%"
    }
  },
  data() {
    return {
      spinnerStyle: {
        backgroundColor: this.color,
        height: this.size,
            width: this.size,
        borderRadius: this.radius,
        margin: this.margin,
        display: 'inline-block',
        animationName: 'spinerAnimation',
        animationDuration: '1.25s',
        animationIterationCount: 'infinite',
        animationTimingFunction: 'ease-in-out',
        animationFillMode: 'both'
      },
      spinnerDelay1: {
        animationDelay: '0.07s'
      },
      spinnerDelay2: {
        animationDelay: '0.14s'
      },
      spinnerDelay3: {
        animationDelay: '0.21s'
      }
    };
  },
  methods: {
    start() {
      this.loading = true;
    },
    end() {
      this.loading = false;
    }
  }
};

</script>

主页是Home.vue，带有其他组件的链接：

 <router-link to="/">Home</router-link>
 <router-link to="/helloworld">Hello World</router-link>
 <router-link to="/bigimg">Big Img</router-link>

和main.js：

import Vue from "vue";
import App from "./App";
import router from "./router";

import Spinner from "./components/Spinner";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: {
    App,
    Spinner
  },
  template: "<App/>"
});

router.beforeEach((to, from, next) => {
  console.log("next page");
  //loading = true
  next();
});

router.afterEach((to, from) => {
  //setTimeout(() => (loading = false), 1500);
});

Spinner Loader 应该在加载主页面（Home.vue）和进入子页面项目（组件）时启动。

问题：当我加载项目的主页（主页）以及进入项目的其他页面时，如何启动加载程序？

标签： javascriptvue.js

解决方案

您只需要创建一个状态变量：

const state = {
    loading: false
};

在你的 main.js 文件中注册它：

new Vue({
  ...
  data: {
    state
  },
});

在主模板中设置条件：

new Vue({
  ...
  template: '<App v-if="!state.loading" /><Spinner v-else/>'
});

然后设置每个路由之前的状态：

router.beforeEach((to, from, next) => {
  console.log("next page");
  state.loading = true;
  setTimeout(() => {
    state.loading = false;
  }, 3000);
  next();
});

推荐阅读