当用户使用 Vue js 在侧边栏导航菜单之外单击时，如何隐藏侧边栏导航菜单？答案

【问题标题】：How to hide the Sidebar Nav Menu when a User clicks outside of it using Vue js?当用户使用 Vue js 在侧边栏导航菜单之外单击时，如何隐藏侧边栏导航菜单？
【发布时间】：2021-01-19 21:21:07
【问题描述】：

我的 SPA 有一个带有侧边栏导航菜单的管理仪表板，当视口大于 991 像素时，默认情况下该菜单可见。当视口小于 991 像素时，导航栏会消失，您会看到一个汉堡图标，您可以单击该图标来切换（显示/隐藏）侧边栏菜单。现在，只有当您再次单击小汉堡菜单图标时，该菜单才会隐藏。如果用户单击菜单之外的任何位置，我想要的是关闭/隐藏菜单。我正在为我的 UI 使用 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 函数都应该被触发。

仅当视口小于 991 像素时，我才需要此代码。同样，我的方法中出现了一些语法错误，我相信是因为我正在尝试在我的方法属性中编写 Javascript。

这就是想法。谢谢。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

问题是methods 必须包含...方法而不是像const navbarTogglerButton … 这样的代码这可能是您遇到的错误

将您的活动附加到.navbar-toggler

<div class="navbar-toggler" @click="showSidebarNavMenu">

methods: {
    hideSidebarNavMenu() {
        this.sidebarMenu = false;
    },

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

}

【讨论】：

问题是我的 HTML 中不存在 div，因为如上所述，它只是 Bootstrap-Vue 的组件自动生成其中的代码。所以我不确定如何动态访问里面的div。
我明白了，一旦你的组件或视图被挂载，你需要添加你的代码const navbarTogglerButton = document.querySelector(".navbar-toggler"); navbarTogglerButton.addEventListener('click', function(event) { this.sidebarMenu = true; })。查看lifecyle diagram了解更多详情
好的，有没有办法只在视口或窗口小于 991px 时调用这个函数？
此外，当我在侧边栏外部单击时，它会消失，但是当我单击导航栏切换器图标时，我会收到此错误：TypeError: Cannot read property 'classList' of null 我认为它可能因为我的代码/函数在 Admin.vue 但在我的 AppHeader.vue 组件中。我该如何解决这个问题？

【解决方案2】：

我现在才意识到，在我使用的 Free Admin 主题中，当用户单击 Hamburger 按钮来切换侧边栏时，它所做的只是在导航元素上添加和删除一个名为 active 的类。元素：

<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');
    });
}

【讨论】：