iView‐Modal - daniel-qa/Vue GitHub Wiki

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

#

  • 位置高度調整
<Modal
  v-model="modal9"
  title="Title"
  :styles="{ top: '20px' }"
>
  <p>Content</p>
</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" 彈窗寬度
  • 彈框置中
<Modal
v-model="localVisible"
title="學制科目匹配"
width="800"
:mask-closable="false"
class-name="vertical-center-modal"
@on-visible-change="handleVisibleChange"
>

樣式

<style>
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vertical-center-modal .ivu-modal {
  top: 0;
}
</style>
⚠️ **GitHub.com Fallback** ⚠️