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

  • Boostrap5通过JS控制Offcanvas的显示隐藏已关闭评论
  • 25 次浏览
  • A+
所属分类:Web前端
摘要

参考链接: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


涉及的技术栈

  • vue3
  • vite
  • bootstrap5

背景

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

复现问题

Boostrap5通过JS控制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
    Boostrap5通过JS控制Offcanvas的显示隐藏

为什么一个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有些组件可能没有