这是我的代码：
<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 [资产/ 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'
],