Bulma navbar-burger 未连接到 Vue.js 2 中的菜单项

Posted 2023-02-22

【中文标题】Bulma navbar-burger 未连接到 Vue.js 2 中的菜单项

【英文标题】：Bulma's navbar-buger doesnt connect to menu items in Vue.js 2

【发布时间】：2018-02-22 23:19:29

【问题描述】：

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

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

【问题讨论】：

如果你在使用 Vue 为什么你用纯 JS 定义事件？

这是我的测试平台。我是 Vue 的新手，所以没有继续使用它。有没有更惯用的 vue 方式？

当然，vue 让这些事情做起来更容易，我建议你阅读一下它

@fatman 有什么具体的指针吗？

vuejs.org/v2/guide

【参考方案1】：

所以，在研究了 Vue 指南和 fatman 的 cmets 提供的线索之后，我采用了这个修复方法。

上面的代码可以工作，但这是一种更 vue-ish 的方式来做 navbar-burger 菜单。

<template>

      <nav class="navbar">
        <div class="container">
        <div class="navbar-brand is-large">
          <a class="navbar-item" href="#">
              <img   >
          </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 负责。

【参考方案2】：

这行得通，但是

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

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

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

【讨论】：

能否请您详细说明第 1 点。因为我可以关闭我的菜单

嗨@VipinRai，使用 navbar-item 处的代码关闭菜单，否则不会。但是对于 2.) 我一直不精确：用户必须明确单击导航栏项的文本，而不是行 - 然后将加载路由器的内容。如果用户单击该行 - 菜单消失，但内容保持不变。