Open Yeung2017 opened 5 years ago
目前还是采用的直接修改css的办法控制不可用样式
.processEditorContextMenu {
// 默认是不可见的,除非右键点击
display: none;
:global {
.ant-menu {
border: none;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.ant-menu-item {
padding: 0;
.command {
padding: 0 16px;
&.disable {
// 命令按钮不可用的样式
color: rgba(0, 0, 0, 0.25);
background-color: #fff;
cursor: not-allowed;
}
}
}
}
}
@Yeung2017 请问下找到解决方案了吗
问题描述:
因为我的右键菜单会有二级菜单,故选用了antd.Menu来实现相关功能. 而目前Command作为Menu.Item的子组件,当Command为不可用状态时,Menu.Item不能知道Command当前的状态. 虽然Command组件上会添上disable类,可以通过css来修改样式,但是在这种情况下修改的样式过多,且很可能破坏Menu.Item的样式.
问题截图:
理想的状态是:
Menu.Item能够知道Command当前不可用,从而直接设置Menu.Item的disabled属性为true
次理想的状态:
当Command不能用的时候,能够在父(祖先)添加对应的类,从而更方便的书写css代码.
相关代码
ProcessEditorContextMenu.js
style.module.less