Question

Vue元素“ router-view”阻止了我要切换的元素之一。但是我需要路由器链接到我的其他页面。关于DIV＃菜单为何所有元素都切换的任何建议？

这就是我想要做的：

单击#menu后，DIV“下拉列表”将扩展，并且#menu DIV将获得.extend类以删除边框。由于某些奇怪的原因，当我删除App.vue中的router-view组件时，它可以工作。但这不是一个选择。

App.vue

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

import Menu from './Modules/Menus/Menu.vue'; 

export default {
components: {
    Menu
  }
}

</script>
<style>
</style>

Main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import 'bootstrap/dist/js/bootstrap.min.js';
import './assets/js/global.js';


import App from './components/App.vue'
import About from './components/About.vue'
import Consult from './components/Consult.vue'
import Contact from './components/Contact.vue'
import Customers from './components/Customers.vue'
import Msgpia from './components/Msgpia.vue'
import Dataprotection from './components/Dataprotection.vue'

Vue.use(VueRouter)

const routes = [
  {
     name: 'About',
     path: '/about',
     component: About
 },
 {
     name: 'App',
     path: '/',
     component: App
 },
 {
     name: 'Consult',
     path: '/consult',
     component: Consult
 },
 {
     name: 'Contact',
     path: '/contact',
     component: Contact
 },
 {
     name: 'Customers',
     path: '/customers',
     component: Customers
 },
 {
     name: 'Msgpia',
     path: '/msgpia',
     component: Msgpia
 },
 {
     name: 'Dataprotection',
     path: '/dataprotection',
     component: Dataprotection
 }
];

var router = new VueRouter({
  mode: 'history',
  linkActiveClass: 'active',
  routes: routes
});

new Vue(Vue.util.extend({ router }, App)).$mount('#app')

Menu.vue

<template lang="html">
<div>
    <!-- menu -->
      <div id="menu" class="d-flex flex-row justify-content-center align-items-center" @click="toggleMenu">
          <p class="upperC">Menu</p>
          <div id="burger">
              <div class="bar barTop">
              </div>
              <div class="bar barCenter">
              </div>
              <div class="bar barBottom">
              </div>
          </div>
      </div>
      <div class="dropDown d-flex justify-content-between flex-column bigBorder">
          <div id="menuTopLinks" class="row">
              <div class="col-sm-10 d-flex flex-row justify-content-around">
                  <li @click="toggleMenu"><router-link to='/about'>Über Pial</router-link></li>
                  <li @click="toggleMenu"><router-link to='/customers'>Kunden</router-link></li>
                  <li @click="toggleMenu"><router-link to='/contact'>Kontakt</router-link></li>
              </div>
          </div>
          <div id="menuCenter" class="row">
              <div class="offset-sm-2 col-sm-8 ">
                  <router-link to='/msgpia'><h3 class="borderBottom" @click="toggleMenu">MSG.PIA</h3></router-link>
                  <router-link to='/consult'><h3 class="borderBottom" @click="toggleMenu">Beratungsleistung</h3></router-link>
              </div>
          </div>
          <div id="menuFooter" class="row">
              <div class="offset-sm-1 col-sm-10 d-flex flex-row justify-content-between">
                  <router-link to='/'><p @click="toggleMenu" class="upperC">Startseite</p></router-link>
                  <p @click="toggleMenu" class="upperC"><a @click="openImpressum" class="impressumLink">Impressum</a></p>
                  <p @click="toggleMenu" class="upperC"><router-link to='/dataprotection' class="datenschutzLink">Datenschutz</router-link></p>
              </div>
          </div>
      </div>
      <!-- menu -->
</div>

</template>

<script>


export default {
    methods:{
        // open and closes menu on all other sites
        toggleMenu: function() {
            var menu = document.getElementById('menu');
            var bars = document.querySelectorAll('.bar');
            var dropDown = document.querySelector('.dropDown');

            menu.classList.toggle('extend');
            dropDown.classList.toggle('extend');

            for (var i = 0; i < bars.length; i++) {
                bars[i].classList.toggle('extend');
            }
        },

        openImpressum: function(){
            document.getElementById('impressumOverlay').style.display = 'block';
        },

        openDataprotection: function(){
            document.getElementById('datenSchutzOverlay').style.display = 'block';
        }
    }
}
</script>

<style lang="scss">
@import './src/assets/scss/variables';


#menu {
    clear: both;
    position: fixed;
    top: 50px;
    right: 0;
    width: 178px;
    height: 70px;
    z-index: 900;
    margin-right: 50px;
    background-color: $color-purple;
    border: 8px solid $color-black;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms;

    &.extend {
        border: none;
        background-color: transparent;
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }

    p {
        margin: 0;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.92px;
        line-height: 20px;
        padding-right: 1rem;
    }

    #burger {
        width: 32px;

        .bar {
            background-color: $color-black;
            height: 4px;
            margin: 4px 0;
            -webkit-transition: 0.4s;
            transition: 0.4s;
        }
        /* Rotate first bar */
        .barTop {
            &.extend {
                -webkit-transform: rotate(-45deg) translate(-6px, 5px);
                transform: rotate(-45deg) translate(-6px, 5px);
            }
        }
        /* Fade out the second bar */
        .barCenter {
            &.extend {
                opacity: 0;
            }
        }
        /* Rotate last bar */
        .barBottom {
            &.extend {
                -webkit-transform: rotate(45deg) translate(-6px, -5px);
                transform: rotate(45deg) translate(-6px, -6px);
            }
        }
    }
}

.dropDown {
    z-index: 150;
    position: fixed;
    top: 24px;
    right: 0;
    margin-right: 50px;
    background-color: $color-purple;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: all 400ms;
    transition: all 400ms;

    &.extend {
        opacity: 1;
        width: 70%;
        height: 90%;
    }

    #menuFooter{
        p{
            font-weight: 600;
            line-height: 40px;
            letter-spacing: 1px;
            font-size: 0.7rem;

            &:first-child{
                width: 211px;
                height: 36px;
                text-align: center;
                background-color: $color-black;
                font-size: 1rem;
                color: white;
                font-weight: 600;
                letter-spacing: 1.5px;
            }
        }
    }

    #menuTopLinks {
        margin-top: 42px;

        li {
            list-style: none;

            a {
                text-decoration: none;
                font-size: 1.4rem;
                letter-spacing: 2px;
            }
        }
    }

    #menuCenter {
        h3 {
            font-size: 2rem;
            font-weight: 600;
            letter-spacing: 2px;
            line-height: 24px;
            padding: 2rem 0;
        }
    }
}
</style>

Answer 1

您可以使用@click事件处理程序并通过为此事件编写方法来切换类。

<div id="menuTopLinks" class="row" @click="mouseOver">

mouseOver: function () {
    var x = document.getElementById("menuTopLinks")
    if (x) {
        x.classList.toggle("extend")
    }
}

.toggle（）无法与Vue Router一起使用

1 个答案: