Blog

Vue | 用純js控制Bootstrap Modal透過事件觸發顯示 (非bootstrap vue)

  • Post category:前端相關
  • Post last modified:2023-06-27
  • Reading time:4 mins read
Tags:

由於Bootstrap Vue只支援到vue 2.6多的版本，導致將vue升級至3.0的時候無法使用，需要自己撰寫類似的modal呈現方式。

需求

使用 Vue3+Bootstrtap5 製作報錯Modal 含可變動訊息內容。

作法

  • 用Bootstrap Modal建立一個ErrorModal元件並且在data新增errorCode對應的中文訊息。
  • 將ErrorModal綁在app.vue上，在app.vue的data建立一個errorCode傳入ErrorModal裡，作為對應報錯訊息的判斷，以及觸發ErrorModal的函式openErrorModal(errorCd)，errorCd為要傳入做判斷的訊息code。
  • 新增一個子元件，資料為 axios call api 傳入，在 .then 跟 .catch 的階段分別呼叫$emit觸發 app.vue 裡的openErrorModal，並傳入對應的errorCode。

起手式：記得導入modal

import {Modal} from 'bootstrap';

用js開啟modal

至於用js打開Bootstrap Modal的寫法很簡單，但是資料真的很少，大部分都是用JQ或按鈕去打開modal，但不想為了打開Modal去加載JQ，很沒意義，所以花超多時間挖相關資料後自己推斷和嘗試出的結果。
就是用bootstrap文件提供的超級不起眼的方法去存取Modal的實例就可以對Modal進行操作。

var errorModal = document.getElementById('errorModal'); //Modal的id
var modal = Modal.getOrCreateInstance(errorModal); //創建或取得modal實例
modal.show();

ErrorModal.vue 的配置

//template
  <!-- Modal -->
  <div class="modal fade ErrorModal" id="errorModal" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body">
          <div v-html="error_msg[errorCode]"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">確認</button>
        </div>
      </div>
    </div>
  </div>
//script
  props:["errorCode"],
  data() {
    return {
      error_msg:{ //error code 定義在這
        axios_error:"無法擷取資料來源!!",
        get_null:"無資料可顯示!!",
        // text_error:"部分欄位內容異常，<br>請確認資料填寫是否正確",
      },
    };
  },

app.vue 的配置

//template
<div id="app" class="app">
    <!-- 報錯modal -->
    <ErrorModal 
    :errorCode="errorCode"
    />
      <ChildComponent 
      @openErrorModal="openErrorModal"
      />
</div>
import ErrorModal from '@/components/modal/ErrorModal';
import ChildComponent from "@/views/ChildComponent";
components: {
    ErrorModal,
    ChildComponent
},
data(){
    return{
      errorCode:"axios_error",
    }
}
...
methods:{
    openErrorModal(errorCd){
      this.errorCode = errorCd;
      var errorModal = document.getElementById('errorModal'); 
      var modal = Modal.getOrCreateInstance(errorModal);
      modal.show();
    }
}

ChildComponent.vue 的配置

//template
<div>
      <ul>
        <li v-for="(item, index) in dataList" :key="index">
              {{ item.name }}
        </li>
      </ul>
  </div>
//script
 mounted() {
    this.axios.get("/api/ChooseDate/list").then(res => {
      if(res.data.array.length !== 0){
        this.dataList = res.data.array;
      }else{
      //回傳陣列為空值的報錯與訊息code
        this.$emit('openErrorModal',"get_null");
      }
    }).catch(err=>{
      //call api 回應錯誤的報錯與訊息code
      this.$emit('openErrorModal',"axios_error");
    });
  },