Boostrap5通过JS控制Offcanvas的显示隐藏

涉及的技术栈

  • vue3
  • vite
  • bootstrap5

背景

  • 在用bootstrap5的时候遇到一个问题,就是offcanvas在nav上的时候居然会有两个背景BackDrop,关闭之后页面上还有一个backdrop留在那
  • bootstrap5文档里面提供了几个Method可以控制Offcanvas实例的显示隐藏,但是不会用

复现问题

  1. 点击offcanvas中的导航控件,页面正常跳转,但是无法关闭offcanvas
  2. 点击offcanvas外部区域,会多一次backdrop,无法直接关闭

解决方式

参考链接:https://stackoverflow.com/questions/73428036/how-to-hide-bootstrap-offcanvas-in-vue3-when-router-link-is-clicked#:~:text=you have to create an offcanvas instance with,let myOffcanvas %3D document.getElementById('offcanvasDarkNavbar') let bsOffcanvas %3D bootstrap.Offcanvas.getInstance(myOffcanvas)%3B

  1. 跳转无法关闭offcanvas

通过StackOverflow中提供的解决方式

部分offcanvas代码

 <div id="offcanvasNavbar" ref="offcanvasRef" class="offcanvas-start offcanvas">
	<div class="offcanvas-header"></div>
	<div class="offcanvas-body"></div>
</div>

点击跳转链接,触发点击事件的时候,加上这个来隐藏offcanvas
引入bootstrap


import * as bootstrap from 'bootstrap';

hideThisCanvas(){ 
    let myOffcanvas = document.getElementById('offcanvasDarkNavbar');
    let bsOffcanvas = bootstrap.Offcanvas.getInstance(myOffcanvas); 
    bsOffcanvas.hide();
}

通过ref的方式试了一下对我这里好像没什么用,所以就直接通过查询DOM来获取offcanvas的实例了

  1. 自动关闭offcanvas无法关闭多出来的backdrop

为什么一个offcanvas会有俩backdrop,我也还没明白为啥,文档里面的示例都只有一个backdrop来的

所以目前就通过在关闭offcanvas的时候,再调用一下删除所有backdrop的方法了

在@click的事件里面同时传入点击事件实例

<ul class="dropdown-menu">
    <li><a class="dropdown-item bi bi-file-image" @click="jump($event, '/path1')">套图</a></li>
    <li><a class="dropdown-item bi bi-file-richtext" @click="jump($event, '/path2')">图文</a>
    </li>
</ul>
    removeDocumentBackdrops(e) {
        let list = document.getElementsByClassName('offcanvas-backdrop');
        for (let i = 0; i < list.length; i++) {
            list[i].remove();
        }
    },

一通百通

上述过程也可以应用到Bootstrap其他的组件上,调用对应的method控制组件状态

  1. 引入import * as bootstrap from 'bootstrap';
  2. 初始化组件 bootstrap.Offcanvas.getInstance(myOffcanvas);

注意 bootstrap有些组件可能没有

热门相关:飞虎精英之人间有情粤语   小姐姐3   我的妻子是两个   朋友妻   催情宝鉴番外篇之《月神貓》