ant-modal 修改 ant-modal-body 滚动条样式,代码如下: ::v-deep .ant-modal-body { display: flex; justify-content: space-around; height: calc(100vh-150px); overflow-y: auto;&::-webkit-scrollbar { width: 8px; height: 2px; background: #dee4e9; border-radius: 6px;/*外层轨道*/}&::...
在调整弹框内部的样式时,我们需要了解modal内部的结构,如下图: bodyStyle 对应的div:.ant-modal-body 所在的div style 对应的div: .ant-modal 所在的div ant-modal-content 对应的样式 footer 对应的div .ant-modal-footer 所在的div header 对应的div .ant-modal-header 所在的div <template> <div class="...
手动关闭modal。 自定义页脚按钮属性 传入okButtonProps和cancelButtonProps可分别自定义确定按钮和取消按钮的 props。 API# 参数说明类型默认值 afterCloseModal 完全关闭后的回调function无 bodyStyleModal body 样式object{} cancelText取消按钮文字string取消
Provides a convenient/easy way to get rid of the padding in the ant-modal-body class, which is particularly useful with long, scrolling modal content. What does the proposed API look like? Add something likebodyStyle={{ padding: '0' }}to Modal ...
(visible);// 模态框 DOM Ref 引用constmodalRef=useRef(null);// body 需要设置为 overflow: hidden 避免模态框展示时页面可以滚动useEffect(()=>{document.body.style.overflow=visible?"hidden":"";},[visible]);// 绑定 document 的点击事件,设置 transformOriginuseEffect(()=>{/*** @param {MouseEvent...
title="自定义Modal" visible={visible} onOk={handleOk} onCancel={handleCancel} bodyStyle={{ /*在这里设置body样式*/ }} > <p>这是Modal的内容</p> </Modal> </> ); }; export default CustomModal; ``` 在上面的代码中,`bodyStyle`属性被传递给Modal组件,并通过对象形式设置了样式。你可以在这...
我在检查dom的时候,发现modal这个dom居然跑到了<div id='root'></div>外面。如图: 而后明白了API中这个属性的解释: 原来默认挂在到了body节点,而我的当前样式文件却只能作用于<div id='root'></div>下的dom。所以用一下这个属性: getContainer={document.getElementsByClassName('div')[0]} 这也是偶然发现,...
ant vue 修改modal样式 1 2 3 4 5 6 7 8 9 10 11 <stylelang="less" scoped> div /deep/ .ant-modal-content{ height: 600px; width: 1000px; } div /deep/ .ant-modal-body{ height: 80%; width: 100%; } </style>
bodyStyle Modal body 样式 object {} cancelButtonProps cancel 按钮 props ButtonProps - cancelText 取消按钮文字 string| slot 取消 centered 垂直居中展示 Modal boolean false closable 是否显示右上角的关闭按钮 boolean true closeIcon 自定义关闭图标 VNode | slot - confirmLoading 确定按钮 loading ...
:class="[modalClass, simpleClass]" :visible="visible" v-bind="$props" :footer="null" :bodyStyle="{ padding: 0 }" @ok="handleOk" @cancel="handleCancel" > <div class="ant-modal-body" :style="bodyStyle"> <slot></slot> </div> ...