Блог

Главная - Вопросы по программированию - Как скрыть меню навигации на боковой панели, когда пользователь нажимает за его пределами с помощью Vue js?

Как скрыть меню навигации на боковой панели, когда пользователь нажимает за его пределами с помощью Vue js?

#javascript #vue.js

#javascript #vue.js

Вопрос:

В моем SPA есть панель администратора с меню навигации на боковой панели, которое отображается по умолчанию, когда размер окна просмотра превышает 991px. Когда размер области просмотра меньше 991px, панель навигации исчезает, и у вас появляется значок гамбургера, который вы можете щелкнуть, чтобы переключить (показать / скрыть) меню боковой панели. Прямо сейчас меню будет скрываться, только если вы нажмете на значок меню с маленьким гамбургером во второй раз. Я хочу закрыть / скрыть меню, если пользователь нажимает где-либо за его пределами. Я использую Bootstrap-Vue для своего пользовательского интерфейса.

Итак, у меня есть <b-navbar toggleable="md" type="dark" variant="info"></b-navbar> .

Я хотел бы сделать что-то вроде этого, но я знаю, что я смешиваю Javascript и Vue js и не уверен, как именно это настроить.

 data() {
    return {
        sidebarMenu: true
    }
}
  
 <section class="app-sidebar" v-if="sidebarMenu">
  
 <div class="main-panel" @click="hideSidebarNavMenu">
  
 methods: {
    hideSidebarNavMenu() {
        this.sidebarMenu = false;
    },

    const navbarTogglerButton = document.querySelector(".navbar-toggler");

    navbarTogglerButton.addEventListener('click', function(event) {
        this.sidebarMenu = true;
    })
}

Этот div на главной панели будет содержать все данные для каждой страницы, поэтому независимо от того, где они нажимают, эта hideSidebarNavMenu функция должна быть запущена.

Мне нужно, чтобы этот код работал только тогда, когда размер окна просмотра меньше 991px. Опять же, я получаю некоторые синтаксические ошибки в своих методах, я полагаю, потому что я пытаюсь написать Javascript в своем атрибуте methods.

Это идея. Спасибо.

Ответ №1:

Проблема в том, что methods must содержит … методы, а не код, подобный const navbarTogglerButton … этому, вероятно, является вашей ошибкой

прикрепите свое событие к .navbar-toggler 

 <div class="navbar-toggler" @click="showSidebarNavMenu">
  
 methods: {
    hideSidebarNavMenu() {
        this.sidebarMenu = false;
    },

    showSidebarNavMenu() {
        this.sidebarMenu = true;
    },

}

Комментарии:

1. Проблема в том, что div не существует в моем HTML, потому что, как упоминалось выше, это просто компонент Bootstrap-Vue <b-navbar>, который автоматически генерирует код внутри него. Поэтому я не уверен, как получить доступ к div внутри динамически.

2. Я понимаю, тогда вам нужно добавить свой код const navbarTogglerButton = document.querySelector(".navbar-toggler"); navbarTogglerButton.addEventListener('click', function(event) { this.sidebarMenu = true; }) после монтирования вашего компонента или представления. Посмотрите на диаграмму жизненного цикла для получения более подробной информации

3. Хорошо, и есть ли способ вызывать эту функцию только тогда, когда размер области просмотра или окна меньше 991px?

4. Кроме того, боковая панель исчезает, когда я нажимаю за ее пределами, но когда я нажимаю на значок переключателя панели навигации, я получаю эту ошибку: TypeError: не удается прочитать свойство ‘classList’ null, и я думаю, это может быть потому, что мой код / функция находится в Admin.vue, но <b-navbar>находится внутри моего компонента AppHeader.vue. Как я могу это исправить?

Ответ №2:

Я только сейчас понял, что в бесплатной теме администратора, которую я использую, когда пользователь нажимает на кнопку Hamburger, чтобы переключить боковую панель, все, что он делает, это просто добавляет и удаляет класс с именем active в элементе nav. Элемент:

 <nav id="sidebar" class="sidebar sidebar-offcanvas active">

И вот как я это решил:

 mounted() {
    var mainPanelDiv = document.querySelector(".main-panel");
    var navbar = document.querySelector("#sidebar");
    mainPanelDiv.addEventListener('click', function(event) {
        navbar.classList.remove('active');
    });
}