-------UPDATE: 2024-04-24-------

原來是導入bootstrap包有問題，重復導入了

涉及的技術棧

• 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的實例了

2. 自動關閉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有些組件可能沒有