vue.js - 更改 Nuxt 进度条的位置

Question

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

谢谢

Answer 1

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

nuxt.config.js 加载对象的可用属性

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/

Answer 2

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

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