#vue.js #nuxt.js #vuetify.js #nuxtjs
#vue.js #nuxt.js #vuetify.js #nuxtjs
Вопрос:
Я использую Nuxt с Vuetify, поэтому может отображаться панель навигации вверху и меню слева. возможно ли переместить индикатор выполнения в верхнюю часть самой страницы (ниже панели навигации)?
Спасибо
Ответ №1:
Панель загрузки очень настраиваема, но не настолько, чтобы изменять ее местоположение.
Но вы можете создать свой собственный компонент, который заменит панель загрузки по умолчанию, чтобы она отображалась везде. Однако это немного больше работы.
Смотрите официальные документы.
Комментарии:
1. как я могу установить его положение по отношению к другому компоненту / странице?
2. Я протестировал некоторые вещи, но оказалось, что вы не можете контролировать, где размещать загрузочный компонент в дереве компонентов. Nuxt создает его сам в качестве первого компонента под <Root> . Может быть, вы могли бы открыть запрос функции для этого?
Ответ №2:
Панель загрузки настраивается в 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, и это просто сработало. Итак, я думаю, вы должны иметь возможность изменять положение и поворот панели загрузки, чтобы она загружалась сверху вниз или снизу вверх в левой части окна просмотра. Я читал, что вы можете просто полностью изменить компонент, и это может быть лучшим способом его настройки, а не перезаписывать default .nuxt-progress css.