describe:
In the previous project, there was a single record in the table to check the details and modify it. Since the pages used are similar, I found a way to simply control the display of the footer of the modal box
process:
When I first read the document and searched and consulted, since the modal comes with the prop setting of the button, the property is the same as the prop property of the button, so set the css setting for it, and control the button by setting the css display to none or inline-block hide and show. Reference: Antd alone hides the default ok or cancel button of the Modal dialog box - hoaxxcj's blog - CSDN blog
The final effect is as follows:
The code is also very small, just for reference:
In the template:
<a-modal
:title="modaltitle"
:visible="visible"
:confirm-loading="confirmLoading"
:cancel-button-props="modalFooter"
:ok-button-props="modalFooter"
okText="确定"
cancelText="取消"
@ok="handleOk"
@cancel="handleCancel"
>
data:
displayTrue: { style: { display: "inline-block" } },
displayFalse: { style: { display: "none" } },
modalFooter: {}
solve:
But in fact, it is only set for the button, and the footer still exists, and there will be an inexplicable line, which does not feel very beautiful.
After reading the document again, I found a method to dynamically display and hide the footer
Since the footer can be hidden with null, can any string be used for display? The answer is no. After trying for a long time, I still don’t know what the default value of footer is, which means I can only hide it, but I don’t know how to show it again. When I came back to look at the documentation, I saw the slot. Finally, this effect was accomplished with slots.
After thinking about it for a while, antdv says that the value of the slot can be passed, and all use slot=its attribute name. But there is no direct writing when modifying the attribute. The null means empty, and the other one is undefined. After it is undefined here, the slot will be used.
<a-modal
:title="modaltitle"
:visible="visible"
:confirm-loading="confirmLoading"
:footer="!isDetail ? null : undefined"
@cancel="handleCancel"
>
<template slot="footer">
<div>
<a-button type="white" @click="handleCancel">取消</a-button>
<a-button type="primary" @click="handleOk">确定</a-button>
</div>
</template>Finally achieved what I wanted:
Summarize:
After the property name is dynamically changed to undefined, the statement in the slot will be executed.
doubt:
After experimenting, I found that the footer slot seems to be used as a footer slot if anything is added after the footer. do not know why.
