英文:
Ant D Drawer , mask={false} and maskClosable={true} incompatible?
问题
我正在使用 antd 的 Drawer 组件作为弹出模态框。我想要禁用遮罩层，因为我不想要它应用在左侧的暗色遮罩，但似乎这会阻止组件保持 maskClosable 参数，该参数允许你通过点击屏幕左侧来关闭模态框。
一个可能的解决方案是保持 mask 参数为 true，但更改 CSS 样式使其完全透明，但我不确定如何做到这一点。
欢迎提供其他解决方案。
谢谢提前。
英文:
I am using the ant d Drawer component as a pop up modal. I wanted to disable the mask as I didnt want the dark mask it applies to the left hand side, however this seems to prevent the component from mantaining its mask closable parameter which allows you to close the modal by clicking on the left side of the screen (mask)
A possible solution would be to mantain the mask param as true but change the css styling so its completely transparent but I am not sure how to do this?
Any other solutions are welcomed
Thanks in advance
<div>
<Drawer
className="add-days-modal"
placement="right"
closable={false}
onClose={props.handleCancel}
visible={props.addDayModalVisible}
key="right"
width="500px"
maskClosable={true}
mask={false}
>
{props.content}
</Drawer>
</div>
答案1
得分: 1
不使用遮罩，用户无法点击任何内容来触发关闭事件。
您可以尝试的替代方法是将遮罩的不透明度设置为0，这将使它对用户不可见，但他们仍然可以点击它，从而关闭抽屉。
另一个更复杂的选项是向屏幕点击添加事件处理程序。然后，当用户单击抽屉之外的任何地方时，将抽屉的状态设置为关闭。
我建议选择选项1。
英文:
Without the mask there is nothing for the user to click on which would trigger the close event.
What you can try doing instead to achieve what you are after is set the opacity on the mask to 0, this will mean that it is invisible to the user but they can still click on it which will close the Drawer.
The other option which is much more complex is to add an event handler to the screen click. Then when the user clicks anywhere away from the draw you set the state of the Drawer to closed.
My advice is go with option 1
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论