Отключить прокрутку и обработать метод Close для боковой панели в BootstrapVue - PullRequest
Новая
       82

Отключить прокрутку и обработать метод Close для боковой панели в BootstrapVue

3 голосов
/ 07 мая 2020

Я хотел бы задать 2 вопроса о Боковая панель в BootstrapVue.

  1. Отключить прокрутку после открытая боковая панель
  2. Как обрабатывать метод закрытия при щелчке за пределами боковой панели ( Фон )

Я использую https://bootstrap-vue.org/docs/components/sidebar

enter image description here

<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>

Спасибо и признательны.

1 Ответ

2 голосов
/ 07 мая 2020

Вы можете удалить полосу прокрутки, добавив 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>
...