在BootstrapVue中禁用滚动和处理侧边栏的关闭方法。

Question

我想问两个问题 边栏 在 浏览器.

1. 禁用滚动 打开侧栏后
2. 如何使用 结案处理 当在侧栏外点击(背景)

我用的是 https:/bootstrap-vue.orgdocscomponentssidebar。

<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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/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/[email protected]/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>