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

Posted 2023-02-22

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

【英文标题】：building a overlay fullscreen navbar in vue.js, by toggle navbar height from 0% to 100%

【发布时间】：2020-11-12 20:27:19

【问题描述】：

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

但坚持如何将 div 高度从 0% 切换到 100%。我确实创建了 2 个类，

'导航栏' 'navbar_open'

但我不确定如何在 Vue 中切换它们。我可以看到，一旦触发了@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>

【参考方案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

-> 打开导航

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

  <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>

【讨论】：

与设置高度没有区别：100vh 或 100%。我用 devtool 进行了快速测试（手动修改），结果相同。问题是“navbar”和“nabbar_open”两个类同时出现。不是一个或另一个。

@KimchiRice 现在试试这个

@Krzsztof 另一种方式，通过保留先前的绑定但更改 CSS 样式顺序，将 .navbar 放在 .navbar_open 的前面。