3

我正在尝试为我的应用程序实现一个导航栏，该应用程序的前端是使用 Vue 2.0 和 Bulma 构建的。它在台式机上运行良好，但在较小的屏幕上显示汉堡图标但不显示任何元素。它只是现在。

<template>
<div class="container is-fluid">
    <div>
      <nav class="navbar is-dark">
        <div class="navbar-brand">
          <a class="navbar-item" href="#">
              <img  alt="K R O N O S" height="100px">
          </a>
          <div class="button navbar-burger" data-target="navMenu">
              <span></span>
              <span></span>
              <span></span>
        </div>
        </div>
        <div class="navbar-menu" id="navMenu">
          <div class="navbar-end">
            <div class="navbar-item">
              <a class="" href="#"> Docs </a>
            </div>
            <div class="navbar-item ">
              <a class="" href="#"> Report </a>
            </div>
            <div class="navbar-item">
              <a class="">More</a>
            </div>
            <div class="navbar-item">
              <a class="">Logout</a>
            </div>
        </div>
      </div>
    </nav>
  </div>
</div>
</template>

<script>

document.addEventListener('DOMContentLoaded', function () {
  // Get all "navbar-burger" elements
  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
  // Check if there are any navbar burgers
  if ($navbarBurgers.length > 0) {
    // Add a click event on each of them
    $navbarBurgers.forEach(function ($el) {
      $el.addEventListener('click', function () {
        // Get the target from the "data-target" attribute
        var target = $el.dataset.target
        var $target = document.getElementById(target)

        // Toggle the class on both the "navbar-burger" and the "navbar-menu"
        $el.classList.toggle('is-active')
        $target.classList.toggle('is-active')
      })
    })
  }
})
export default {
  name: 'Navbar',
  data () {
    return {
      msg: ''
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
  border: 0px solid black;
}
</style>

如您所见，我已尝试实现此处存在但没有用的示例代码。布尔玛不应该给我开箱即用的响应式导航栏。我发现的所有示例和解决方案都是针对较旧的“导航”类而不是较新的“导航栏”。帮助将不胜感激。

4

2 回答 2

7

因此，在对 Vue 指南和fatman评论中的线索进行了一些研究之后，这就是我应用的修复程序。

上面的代码有效，但这是一种更 vue-ish 的方式来执行 navbar-burger 菜单。

<template>

      <nav class="navbar">
        <div class="container">
        <div class="navbar-brand is-large">
          <a class="navbar-item" href="#">
              <img  alt="K R O N O S" height="100px">
          </a>
          <button @click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
              <span></span>
              <span></span>
              <span></span>
        </button>
        </div>
        <div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
          <div class="navbar-end">
            <div class="navbar-item">
              <a class="" href="#"> Docs </a>
            </div>
            <div class="navbar-item ">
              <a class="" href="#"> Report </a>
            </div>
            <div class="navbar-item">
              <a class="">More</a>
            </div>
            <div class="navbar-item">
              <a class="">Logout</a>
            </div>
        </div>
      </div>
      </div>
    </nav>

</template>

<script>
export default {
  name: 'Navbar',
  data () {
    return {
      msg: '',
      activator: false
    }
  },
  methods: {
    makeBurger () {
      this.activator = !this.activator
      return this.activator
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
  border: 0px solid black;
}
</style>

希望这可以帮助某人。Bulma 负责显示/隐藏功能。

于 2017-09-14T14:03:38.477 回答
1

这有效，但是

  1. 不会关闭菜单
  2. 将导致路由器链接不起作用

对于 1.) 我建议也将 @click 添加到 navbar-item ：

<a @click="makeBurger" class="navbar-item">
    <router-link to="/login">
        {{link1}}
    </router-link>
</a>
于 2017-09-22T10:46:56.073 回答