vue.js - 在 BootstrapVue 中禁用侧边栏的滚动和处理 Close 方法

Question

我想问两个关于 BootstrapVue 中的 Sidebar 的问题。

打开侧边栏后禁用滚动

在侧边栏外单击时如何 处理关闭方法 ( Backdrop )

我正在使用 https://bootstrap-vue.org/docs/components/sidebar

<template>
  <div>
    <b-button v-b-toggle.sidebar-backdrop>Toggle sSidebar</b-button>
    <b-sidebar
      id="sidebar-backdrop"
      title="Sidebar with backdrop"
      backdrop
      shadow
    >
      <div class="px-3 py-2">
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>
</template>

谢谢并感谢。

Answer 1

您可以通过将 bootstrap 类 overflow-hidden 添加到您的正文中来删除滚动条。

将一个方法连接到侧边栏上的 @change 方法，当侧边栏显示和隐藏时会触发该方法。

侧边栏还有一个 @hidden 事件，当侧边栏隐藏时会触发该事件。

new Vue({
  el: '#app',
  methods: {
    toggleBodyScrollbar(visible) {
      const body = document.getElementsByTagName('body')[0];

      if(visible)
        body.classList.add("overflow-hidden");
      else
        body.classList.remove("overflow-hidden");
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-sidebar id="sidebar-1" title="Sidebar" shadow backdrop @change="toggleBodyScrollbar">
    <div class="px-3 py-2">
      <p>
        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
        in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
      </p>
      <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
    </div>
  </b-sidebar>
  
  <p v-for="i in 10">Some content</p>
  <b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
  <p v-for="i in 10">Some content</p>
</div>