Как установить свойство has-navbar-fixed-top только для некоторых элементов в Vue, используя Bulma? - PullRequest
Новая
       30

Как установить свойство has-navbar-fixed-top только для некоторых элементов в Vue, используя Bulma?

0 голосов
/ 14 декабря 2018

У меня есть пользовательская панель навигации, созданная с помощью Bulma, и я использую Nuxt.js для создания своего приложения.Проблема в том, что я хочу, чтобы панель навигации была зафиксирована сверху, но только на некоторых моих просмотров.Например, я хочу иметь навигацию на моей странице индекса и на всех других страницах, связанных с индексом, но я не хочу иметь ее на страницах входа и регистрации.

В Bulma docs написано:

Добавьте соответствующий модификатор has-navbar-fixed-top или has-navbar-fixed-bottom к элементу <html> или <body>, чтобы обеспечить соответствующий отступ для страницы.

Если я сделаю это в моем файле app.html, все мои представления будут иметь отступы сверху.Есть ли способ перезаписать свойство has-navbar-fixed-top, чтобы сбросить его в представлениях, которые ему не нужны?Или я могу как-то установить его только для компонентов / страниц, которые должны иметь его?

1 Ответ

0 голосов
/ 16 декабря 2018

Все, что вам нужно сделать, это сделать массив, полный ваших путей (pagesWithNavBar) и вычисляемый метод (shouldHaveNavBar), который возвращает истину или ложь в зависимости от того, соответствует ли текущий путь в URL какой-либо элемент из нашего массива (pagesWithNavBar) и, наконец,добавьте проверку в методе head, который проверяет, находимся ли мы в данный момент на странице с путем, включенным в наш массив!

.vue файл - скорее всего, ваш макет -> тег script 

export default {
    data() {
      return {
        pagesWithNavBar: [
          "/login", "/signup" // add here all your paths where u wish to have your navbar
        ] 
      } 
    },
    computed: {
      shouldHaveNavBar() {
        return this.pagesWithNavBar.includes(this.$route.path)
      }
    },
    head() { // since nuxt.js uses vue-meta to update the document head and meta attributes 
             // you can also use it for your own good which means adding meta tags or editing
             // the attributes of a body tag! you can learn more here
             // https://nuxtjs.org/guide/views/#html-head
             // or here
             // https://github.com/declandewet/vue-meta#recognized-metainfo-properties
      return { 
        bodyAttrs: { 
          class: this.shouldHaveNavBar ? "has-navbar-fixed-top" : ""
        }
      }
    }
}
...