更改 Nuxt 进度条的位置答案

【问题标题】：Change the location of Nuxt progress bar更改 Nuxt 进度条的位置
【发布时间】：2021-01-10 10:31:26
【问题描述】：

我将 Nuxt 与 Vuetify 一起使用，因此布局可能是顶部的导航栏和左侧的菜单。是否可以将进度条移动到它自己的实际页面顶部（导航栏下方）？

谢谢

【问题讨论】：

标签： vue.js nuxt.js vuetify.js nuxtjs

【解决方案1】：

加载栏是非常可定制的，但不能改变它的位置。

但是您可以创建自己的组件来替换默认加载栏，这样您就可以让它出现在任何地方。不过，还有一些工作要做。
请参阅official docs。

【讨论】：

如何设置它相对于其他组件/页面的位置？
我测试了一些东西，但事实证明您无法控制将加载组件放置在组件树中的位置。 Nuxt 将其自身实例化为下的第一个组件。也许你可以为此打开一个功能请求？

【解决方案2】：

加载栏可在 nuxt.config.js 中自定义，您可以在其中更改以下属性：

available properties for nuxt.config.js loading object

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading

我有一个项目，我需要通过仅使用 css 而不是乱用 nuxt.config.js 来更改加载栏的颜色和高度。所以我只是打开了渲染站点的源代码并查找了 .nuxt-progress 并找到了以下默认样式：

.nuxt-progress {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 2px;
  width: 0%;
  opacity: 1;
  transition: width 0.1s, opacity 0.4s;
  background-color: black;
  z-index: 999999;
}
.nuxt-progress.nuxt-progress-notransition {
  transition: none;
}
.nuxt-progress-failed {
  background-color: red;
}

所以我只是用 css 和 !important 标志覆盖了这些样式，它就起作用了。所以我想你应该能够改变加载条的位置和旋转，以便它在视口左侧从上到下或从下到上加载。我读过您可以完全更改组件，这可能是自定义它的最佳方式，而不是覆盖默认的 .nuxt-progress css。

https://nuxtjs.org/examples/custom-loading-component/

【讨论】：