BootstrapVue 中 Sidebar 禁用滚动并处理 Close 方法

Question

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

1. 打开侧边栏后禁用滚动
2. 单击侧边栏（背景）外部时如何处理关闭方法

我正在使用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

您可以通过将引导类添加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>