iview中Modal對話框自定義頁頭頁腳
- Modal 組件提供了靈活的自定義樣式 API 和 Slot,可以自由控制整個 Modal 的各個組成部分,比如頁頭、頁腳、關閉按鈕。
- 下面是完整代碼:
<Modal v-model="modal2" width="360">
<p slot="header" style="color:#f60;text-align:center">//對話框頁頭
<Icon type="ios-information-circle"></Icon>
<span>Delete confirmation</span>
</p>
<div style="text-align:center">//對話框主體
<p>After this task is deleted, the downstream 10 tasks will not be implemented.</p>
<p>Will you delete it?</p>
</div>
<div slot="footer">//對話框頁腳
<Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button>
</div>
</Modal>