如何在 vue 中禁用移动菜单中的滚动？答案

【问题标题】：How to disable scroll in mobile menu in vue?如何在 vue 中禁用移动菜单中的滚动？
【发布时间】：2022-01-20 01:45:16
【问题描述】：

所以基本上菜单的切换是下面的 id 为“check”的复选框。我尝试将 v-bind:class="[{ 'antiscroll': checkboxValue }]" 绑定到 html 中的正文，但没有成功。当我在主 App.vue 中尝试时也是如此。但是当我把它放在同一个 .vue 页面的导航中时它就起作用了。如何使其在主体或主 vue 应用程序中工作？条件是当屏幕宽度小于 1300 且 checkboxValue 为 true 时，将绑定 antiscroll 类。

navigationbar.vue
<template>
  <nav> <!-- The header menu or navigation bar -->
    <input type="checkbox" id="check" v-model="checkboxValue"> <!-- The three stripe icon for the drop down menu, note: drop down menu only works in smaller screen -->
    <label for="check" class="checkbtn">
      <i class="fas fa-bars"></i>
    </label>
    <label class="logo"> <!-- The logo and website name -->
      <router-link to="/" @click="uncheck">
        <img class="logoimage" src="#">
        <font class="logoname" face="Arial" style="float: left; margin-left: 10px; margin-right: 100px">Test</font>
      </router-link>
    </label>
    <ul> <!-- The menu contains href links to other pages -->
      <li>
        <router-link to="/" @click="uncheck"><b>Home</b></router-link>
      </li>
      <li>
        <router-link to="/catalog" @click="uncheck"><b>Catalog</b></router-link>
      </li>
      <li>
        <router-link to="/about" @click="uncheck"><b>About</b></router-link>
      </li>
      <li> <!-- The search bar -->
      <input type="search" placeholder="Search" class="search" onchange="Search()" id="search">
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'navigationbar',
  data () {
    return {
      checkboxValue: false
    }
  },
  methods: {
    uncheck () {
      this.checkboxValue = false
    }
  }
}
</script>

App.vue
<template>
  <div>
    <navigationbar/>
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
      <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script>
import navigationbar from './components/navigationbar.vue'

export default {
  name: 'App',
  components: {
    navigationbar
  }
}
</script>

<style>
*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
body{
  font-family: montserrat;
  background: #c5d5cb;
}
nav{
  height: 80px;
}
nav ul{
  float: right;
  margin-right: 20px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}
nav ul li a{
  color:rgb(22, 22, 22);
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}
a.router-link-exact-active,a:hover{ /* Changes background color of a button when hovered */
  background: #e9ffe9;
  transition: .5s;
}
.checkbtn{
  font-size: 30px;
  color: rgb(22, 22, 22);
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
}
#check{
  display: none;
}
@media (max-width: 850px){ /* The @media adjust the components when the screen's size reached as low as the value */
  .logoname{
    font-size: 32px;
  }
  .logoimage{
    width: 56px;
  }
  nav ul li a{
    font-size: 16px
  }
}
@media (max-width: 450px){
  .logoname{
    display: none;
  }
}
@media (max-width: 1300px){
  .checkbtn{
    display: block;
  }
  nav ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #455462;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a{
    font-size: 20px;
  }
  a.router-link-exact-active,a:hover{ /* Changes background color of a button when hovered */
    background: #e9ffe9;
    color: #455462;
  }
  #check:checked ~ ul{
    left: 0;
  }
  .fade-enter-active, .fade-leave-active {
    transition: none !important;
  }
  .fade-enter-from, .fade-leave-to {
    transition: none !important;
  }
}
.antiscroll {
  position: fixed;
}
</style>

index.html
<body v-bind:class="[{ 'antiscroll': checkboxValue }]">
  <div id="app"></div>
</body>

【问题讨论】：

标签： html css vue.js

【解决方案1】：

使用 vue 更容易，声明一个变量（我使用 overflowCondition 作为变量名，你可以使用任何东西），你可以使用它来确定按钮的状态是否被点击，把它放在你的数据上，然后给出类上的 v-if 条件以使用此样式或不使用此样式。检查下面的代码以供参考。

<button @click="this.overflowCondition = !this.overflowCondition"> <!-- The three stripe icon for the drop down menu, note: drop down menu only works in smaller screen -->
  <label for="check" class="checkbtn">
  <i class="fas fa-bars"></i>
  </label>
</button>
<div :style="this.overflowCondition == true ? 'overflow:hidden'; ''"> //Whatever container you intend to disable it's scroll-ability.

更多关于overflow属性here。

【讨论】：

当屏幕达到 1300 像素时，媒体会将主菜单转换为 3 条条纹状菜单。我只想在打开菜单时禁用滚动。 #check:checked 用于检查复选框，由于我无法在另一个 css 中设置 css 样式，因此我认为我需要 javascript。
您可以使用按钮触发状态和一些 vuejs 魔法。检查我编辑的答案

【解决方案2】：

你不能像你想要的那样在 index.html 中绑定。如果你需要操作body标签的类，你需要直接访问它。

试试这个：

<template>
  <div>  
    <button class="menu" @click="expandMenu">
      <i class="fas fa-bars"></i>
    </button>
  </div>
</template>

<script>
export default {
  methods: {
    expandMenu() {
      this.menuExpanded = !this.menuExpanded;
      
      if (this.menuExpanded) {
        document.body.classList.add("disableScroll");
      } else {
        document.body.classList.remove("disableScroll");
      }
    }
  },
  data() {
    return {
      menuExpanded: false,
    }
  }
}
</script>

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;

【讨论】：