Question

我正在尝试为我的应用程序实现一个导航栏，其前端是使用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>

正如您所看到的，我已尝试在此处实现示例代码，但没有任何用处。不应该Bulma为我提供开箱即用的响应式导航栏。我找到的所有示例和解决方案都适用于较旧的＆＃34; nav＆＃34;课程不是较新的＆＃34; navbar＆＃34;。非常感谢帮助。

Answer 1

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

上面的代码可以正常工作，但这是一种更有用的方法来执行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负责。

Answer 2

这有效，但

不会关闭菜单
将导致路由器链接无法正常工作

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

<a @click="makeBurger" class="navbar-item">
    <router-link to="/login">
        {{link1}}
    </router-link>
</a>

Bulma的navbar-buger没有连接到Vue.js 2中的菜单项

2 个答案: