Bootstrap modal與Vue


bootstrap 5與js

先載入沒有任何功能的bs5 modal元件,用純js

  • 把data-bs-*都移除
  • 加入id屬性,比較好取出dom
    • id="modalBtn"
    • id="modal
      //擷取dom
      const modalBtn = document.querySelector('#modalBtn');
      const modal = document.querySelector('#modal');
      
  • 打開bs5 modal文件右方

    //將modal實體化
    //實體化,產生modal真的實體myModal
    const myModal = new bootstrap.Modal(modal)
    
  • 再來繼續看能使用什麼方法

    on CodePen.</span>
    </p>
    https://static.coderbridge.com/img/suihsilan/284b8f60292741af9ba83778bf378f91.png)
  • 以上我們用純js的方式來打開modal對話框,不是使用bs5提供的
    ## bs5 modal元件,用vue操作
  • 要記得上方圖,bs5模板無法顯示vue大括號的資料寫入是因為dom元素的擷取時間與順序
  • 因此這裡資料寫入,需要使用先使用到生命週期mounted
    * 表示我們想要畫面生成之後,再來重新擷取dom元素
    
    • 因此我們需要把
    const myModal = new bootstrap.Modal(modal); // 實體化
    設定成
    let myModal = ''空字串
    然後在生命週期生成之後
    再來重新擷取dom元素
    mounted() {
        myModal =  new bootstrap.Modal(document.querySelector('#modalBtn'))
    }

接下來要繼續調整save changes這個行為

  • 在button上加入@click="closeModal()" 寫入methods:{}
    closeModal(){
      myModal.hide();
    }
    







你可能感興趣的文章

[ 筆記 ] JavaScript - ES6語法

[ 筆記 ] JavaScript - ES6語法

Don’t break the Web:以 SmooshGate 以及 keygen 為例

Don’t break the Web:以 SmooshGate 以及 keygen 為例

原始資料類型(Primitive Data Type)& 參考資料類型(Reference Data Type)

原始資料類型(Primitive Data Type)& 參考資料類型(Reference Data Type)






留言討論