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>