Boostrap5透過JS控制Offcanvas的顯示隱藏

你啊347發表於2024-03-14
JSCanvas

涉及的技術棧

  • vue3
  • vite
  • bootstrap5

背景

  • 在用bootstrap5的時候遇到一個問題，就是offcanvas在nav上的時候居然會有兩個背景BackDrop，關閉之後頁面上還有一個backdrop留在那
  • bootstrap5文件裡面提供了幾個Method可以控制Offcanvas例項的顯示隱藏，但是不會用

復現問題

image

  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
    image

為什麼一個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有些元件可能沒有

相關文章