iView‐Modal

Modal 就是「彈出視窗」。會覆蓋畫面、要求使用者先處理完彈窗，才能回到原本的頁面。

• ex

<template>
  <div>
    <!-- 按鈕：開啟 Modal -->
    <Button @click="isModalOpen = true">開啟彈窗</Button>

    <!-- Modal -->
    <Modal v-model="isModalOpen" width="600" footer-hide @on-visible-change="onModalChange">

      <!-- 自訂標題 -->
      <div slot="header" class="modal-header">
        這是 Modal 標題
      </div>

      <!-- 內容 -->
      <div class="modal-body">
        這裡是彈窗的內容。
      </div>

    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalOpen: false
    }
  },
  methods: {
    onModalChange(visible) {
      console.log("Modal 是否顯示：", visible)
    }
  }
}
</script>

使用項目	說明
v-model="isModalOpen"	控制彈窗開關
slot="header"	自訂標題
footer-hide	隱藏底部預設按鈕
@on-visible-change	彈窗開/關時觸發
width="600"	彈窗寬度