![](/img/trans.png)
[英]How can I set the custom marker icon for my leaflet map with NUXT.js
[英]How can I create a custom loading indicator in Nuxt.js?
在此页面内( https://nuxtjs.org/api/configuration-loading-indicator#custom-indicators )说我可以创建自定义加载指示器,但没有说明如何创建。
有人可以帮助我 - 如何创建并将其设置为 nuxt.config?
这是 Nuxt.js 源代码中默认加载指示器的集合。
基本上,你可以指定HTML模板作为使用loadingIndicator
在nuxt.config.js
。
export default {
..., // Other Nuxt configuration
// Simple usage:
loadingIndicator: '~/custom-locading-indicator.html',
// Or with dynamic configuration variables passed via lodash template syntax
loadingIndicator: {
name: '~/custom-locading-indicator.html',
color: '#000',
background: '#fff'
}
}
请注意,指标可以访问
Nuxt 还提供了一个$loading
组件,因此您可以在您的应用程序中的任何地方使用它,无论如何。 使用$nuxt.$loading.get()
将返回当前的加载百分比。
例如:
<template>
<div>
<h1>Home page</h1>
<div v-show="$nuxt.$loading.get() > 0">
{{loadingIndicator}}%
</div>
</div>
</template>
<script>
export default {
computed: {
loadingIndicator() {
return this.$root.$loading.get()
}
}
}
</script>
在@femanso 之后,我设法使用window.$nuxt.$root.$loading.percent
$nuxt.$loading.get()
而不是$nuxt.$loading.get()
自定义我的加载组件
computed: {
loadingIndicator() {
return window.$nuxt.$root.$loading.percent
}
},
如果有人偶然发现并希望从 vue 组件获取当前加载进度,您可以使用:
编辑:它一直工作到我重新启动开发服务器,然后它停止工作。 所以不确定这是否是一个可行的解决方案。
computed: {
nuxtLoading() {
return this.$nuxt.$loading.percent
},
},
使用 Bootstrap 5 微调器( https://v5.getbootstrap.com/docs/5.0/components/spinners/ ),模式:'universal'
在 nuxt.config.js 中
加载:'~/components/loading.vue'
在组件中
<template>
<div
v-if="isLoading"
class="loader"
>
<div class="loader__spinner spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: false
}
},
methods: {
start() {
this.isLoading = true
},
finish() {
this.isLoading = false
}
}
}
</script>
<style lang="scss" scoped>
.loader {
&__spinner {
position: fixed;
top: 10px;
left: 10px;
}
}
</style>
https://nuxtjs.org/guides/configuration-glossary/configuration-loading https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading?from-embed=&file =/components/loading.vue
这是你需要的:
您可以为您的应用程序创建一个组件。 你可以在这里阅读Nuxt Loading
loading: <your-component-path>
在此处阅读更多加载指示器 Property 。 loadingIndicator: {
name: 'chasing-dots',
color: 'purple',
background: 'green'
}
这是我如何在我的应用程序中配置组件的示例。
export default {
// LoadingBar component
loading: '~/path-to-your-loading-component/Loading.vue',
}
在要加载的页面上,添加此内容。
export default {
/*
** programmatically start the loader so we force the page to take x2seconds to load
*/
mounted() {
this.$nextTick(() => {
this.$nuxt.$loading.start()
setTimeout(() => this.$nuxt.$loading.finish(), 2000)
})
}
}
</script>
```
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.