通过将导航栏高度从 0% 切换到 100%，在 vue.js 中构建覆盖全屏导航栏

Question

尝试用Vue.js实现覆盖全屏菜单，html/css/js是[这个解决方案]https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay2

但无法理解如何将 div 高度从 0% 切换到 100%。我确实创建了 2 classes,

• 'navbar'
• 'navbar_open'

但我不确定如何在 Vue.js 中切换它们。我可以看到一旦触发了@click，class="navbar navbar_open"

<div id="myNav" class="navbar navbar_open">
  <div class="closebtn">
    <i class="fa fa-times"></i>
  </div>
  <div class="navbar-content">
  <a>Home</a><a>Contact</a>
  </div>
</div>

下面是 App.vue 文件，

<template>
  <div id="app">
    <!-- Banner/Header -->
    <!-- Hamburger -->
    <div id="myNav" class="navbar" :class="{ navbar_open: showNavbar }">
      <div class="closebtn" v-on:click="showNavbar = !showNavbar">
        <i class="fa fa-times"></i>
      </div>

      <div class="navbar-content">
        <a>Home</a>
        <a>Contact</a>
      </div>
    </div>

    <div class="openbtn">
      <i class="fa fa-bars" v-on:click="showNavbar = !showNavbar"></i>
    </div>

    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showNavbar: false
    };
  },
  methods: {
    toggleNavbar() {
      this.showNavbar = !showNavbar;
    },
    setHeightValue(showNavbar) {
      const heightValue = this.showNavbar ? '100%' : '0%';
      return heightValue;
    }
  },
  created() {
    this.setHeightValue();
  }
};
</script>

<style>
@import url('https://use.fontawesome.com/releases/v5.9.0/css/all.css');

.navbar_open {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: hidden;
  transition: 0.5s;
  background-color: #2b4c72;
}

.navbar {
  width: 100%;
  height: 0%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: hidden;
  transition: 0.5s;
  background-color: #2b4c72;
}

.navbar-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.navbar a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.navbar a:hover,
.navbar a:focus {
  color: #f1f1f1;
}

.navbar .closebtn {
  position: absolute;
  top: 20px;
  left: 45px;
  font-size: 60px;
  color: white;
  cursor: pointer;
}

.openbtn {
  font-size: 30px;
}

@media screen and (max-height: 450px) {
  .navbar {
    overflow-y: auto;
  }
  .navbar a {
    font-size: 20px;
  }
  .navbar .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
</style>

Answer 1

我看到您有未使用的方法 toggleNavbar。您仅在创建组件时才调用 setHeightValue，然后再也不会调用（我认为您可以删除此方法）。此菜单不是 100% 高度可能是因为您将此组件嵌入到另一个高度较小的容器 (<div id="app:...) 中，因此 height: 100% 将是父容器的 100% 高度。您可以使用 100vh 而不是 100%（vh - 是一个视口单位，它将始终占用 100% 视口高度 [如果 50vh 则占总视口高度的 50%]） .您还应该只应用 navbar_open 但现在您正在应用机器人 类 如果您的导航栏是打开的：navabar navbar_open 所以您应该有条件地添加这个 类：

:class="{ 'navbar_open': showNavbar, 'navbar': !showNavbar }"

您还有两个不同的按钮负责两个不同的操作：

• closebtn -> 关闭导航
• openbtn -> 打开导航

所以你应该创建两个不同的方法openNavigation closeNavigation

  <div id="app">
    <!-- Banner/Header -->
    <!-- Hamburger -->
    <div id="myNav" :class="{ 'navbar_open': showNavbar, 'navbar': !showNavbar }">
      <div class="closebtn" @click="closeNavigation">
        <i class="fa fa-times"></i>
      </div>

      <div class="navbar-content">
        <a>Home</a>
        <a>Contact</a>
      </div>
    </div>

    <div class="openbtn">
      <i class="fa fa-bars" @click="showNavigation"></i>
    </div>

    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showNavbar: false
    };
  },
  methods: {
    openNavigation() {
      this.showNavbar = true;
    },
    closeNaviagation() {
      this.showNavbar = false;
    }
  }
};
</script>
<style>
 ...
.navbar_open {
  width: 100%;
  height: 100vh; // <--- 100vh instead of 100%
  position: fixed;
  ...
</style>