在nuxt项目中实现bulma-pageloader的正确方法答案

【问题标题】：The correct way to implement bulma-pageloader in nuxt project在nuxt项目中实现bulma-pageloader的正确方法
【发布时间】：2019-09-24 16:15:09
【问题描述】：

这是我的代码：

<template>
    <div class="pageloader is-active">
      <span class="title">Pageloader</span>
    </div>
</template>

<script>
import 'bulma-extensions/bulma-pageloader/dist/css/bulma-pageloader.min.css';

export default{
    beforeMount: {

    },
    mounted: {

    }

}
</script>

我无法显示 pageloader。我错过了什么吗？

注意：所有的依赖都已经存在了。

更新：这是我基于estevanj解决方案实现扩展的方式。

pageloader.vue [组件]

    <template>
      <div class="pageloader" v-bind:class="{ 'is-active' : loading}">
        <span class="title">Pageloader</span>
      </div>
    </template>

    <script>
    export default {
      data: () => ({
        loading: false
      }),
      methods: {
        start() {
          this.loading = true;
        },
        finish() {
          this.loading = false;
        }
      }
    };
    </script>

main.sass [assets/css]

    @import '~bulma';
    @import '~bulma-extensions/bulma-pageloader/dist/css/bulma-pageloader.sass';

nuxt.config.js

  /*
  ** Customize the progress-bar color
  */
  loading:  '~/components/PageLoader.vue',

  /*
  ** Global CSS
  */
  css: [
    '~/assets/css/main.sass'
  ],

【问题讨论】：

如果你尝试在没有任何类的情况下加载 div 和 span 会发生什么？

标签： vue.js nuxt.js bulma

【解决方案1】：

您必须创建一个像这样的自定义加载： https://nuxtjs.org/examples/custom-loading/

您可以在自定义中使用 bulma :)

【讨论】：