Antd 图片组件的禁用右键和拖拽

背景：用户期望不仅是图片还包括预览下的图片

实现

1. 禁用Image和拖拽，比较简单，查下Api即可,使用onContextMenu和onDragStart

<Image
  onContextMenu={(e) => disableContextMenu && e.preventDefault()}
  onDragStart={(e) => disableDrag && e.preventDefault()}
/>

2. 禁用预览，按照相同思路，只要拿到图片的Dom再做处理，有个问题就是拖拽是使用在上层Dom的transform实现的，这里再加个覆盖处理就行

const onVisibleChange = (visible: boolean) => {
  if (visible) {
    const previewElement = document.body.querySelector(`.${css.preview}`);
    if (!previewElement) {
      return;
    }
    const imageElement = previewElement?.querySelectorAll('img.ant-image-preview-img');
    const wrapperElements = previewElement?.querySelector(`.ant-image-preview-img-wrapper`);
    if (wrapperElements && disableDrag) {
      wrapperElements.classList.add(css.wrapper);
    }
    if (imageElement && imageElement?.length > 0) {
      imageElement.forEach((element) => {
        disableContextMenu && element?.addEventListener('contextmenu', (e) => e.preventDefault());
        disableDrag && element?.addEventListener('dragstart', (e) => e.preventDefault());
      });
    }
  }
};

<Image
  preview={
  usePreview
  ? {
    src,
    className: `${css.preview}`,
    onVisibleChange
    }
    : false
  }
  onContextMenu={(e) => disableContextMenu && e.preventDefault()}
  onDragStart={(e) => disableDrag && e.preventDefault()}
/>

// CSS
.preview {
  .wrapper {
    transform: translate3d(0px, 0px, 0px) !important;
  }
}