问题描述:
如图,底部是固定操作按钮,居中对齐,点击“发布日历”时会出现确认弹窗,但是发现了问题,按钮会集体往右边移动一小段。
检查后发现原因:是底部操作栏的宽度是页面宽度,不包括滚动条,弹窗时出现遮罩,滚动条消失页面宽度会出现小幅增加,所以按钮会发生右移。
原样式:
//js文件
<div className={styles.fixBotBarWrap}>
<Button>预览</Button>
<Button type="primary">发布日历</Button>
<Button>保存</Button>
<Button>关闭</Button>
</div>
//样式文件
.fixBotBarWrap{
position: fixed;
width:100%;
bottom: 0;
left:0;
z-index:999;
background: #F2F2F2;
border-top:1px solid #E1E6E3;
height: 55px;
line-height: 55px;
text-align: center;
:global(.ant-btn){
margin-top: 10px;
}
}
修改方案:1、使用state记录宽度,底部div使用状态值而不是直接获取宽度 2、窗体宽度改变