ant-design Modal的静态方法在ShadowDOM中按钮点击无效

yeotifhr  于 2022-12-31  发布在  其他
关注(0)|答案(1)|浏览(279)
  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Modal的静态方法在ShadowDOM中按钮点击无效

DEMO: https://chuyb.csb.app/

代码: https://codesandbox.io/s/shadowdom-antd-modal-func-chuyb

What does the proposed API look like?

  1. 修改confirm.tsx,提供全局设置getContainer方法
// 提供全局设置getContainer方法
let funcConfig: ModalFuncProps;
export const setFuncConfig = (config: ModalFuncProps) => {
    funcConfig = config;
}

修改index.tsx,增加静态方法setFuncConfig

Modal.setFuncConfig = setFuncConfig;
  1. 修改confirm.tsx,修改confirm中渲染容器div的获取方式
function getFuncContainer(containerFn: GetContainer) {
  let funcContainer: HTMLElement = containerFn as HTMLElement;
  if (typeof containerFn === 'function') {
    funcContainer = containerFn();
  } else if (typeof containerFn === 'string') {
    funcContainer = document.querySelector(containerFn);
  }
  return funcContainer;
}

export default function confirm(config: ModalFuncProps) {
  // eslint-disable-next-line no-use-before-define
  let currentConfig = { ...funcConfig, ...config, close, visible: true } as any;

  const div = document.createElement('div');
  const containerFn = currentConfig.getContainer;
  if (containerFn) {
    const root: HTMLElement = getFuncContainer(containerFn);
    root.appendChild(div);
  } else {
    document.body.appendChild(div);
  }

相关问题