在设置antd-Mobile重的ImageViewer的前提下设置图片不可长按保存功能

由于用户需要图片资料的保密性，让我在移动端禁用小程序自带的长按保存功能。

一开始想到的方法是禁用全局的img，pointer-events: none !important;由于其他网上的禁用方法不可行，只能从这个方向入手。

由于在移动端使用了ImageViewer组建，所以碰到个情况，如果我们全局禁用了img，这个组建中的img就不能进行放大等功能了，于是我们对这个antd组件的属性进行绕开的操作，避免直接操作img，而是找到img的父节点，然后通过img的父节点的点击来进行对img进行操作。

  const showImg = (ev) => {
     // 原来的点击图片
     // ImageViewer.show({
     // image: ev.target.currentSrc,
     // })
     //在父节点找到下面的img
    let image = ev.target.querySelectorAll('img')[0]
    ImageViewer.show({
      image: image.currentSrc,
    })
      }

  useEffect(() => {
    let imgOjbs = []
    let imgOjbsParents = []
    if (data.doc_type === 'doc') {
      imgOjbs = ref.current.querySelectorAll('img')
      imgOjbsParents = ref.current.querySelectorAll('img').offsetParent
      console.log('imgOjbsParents', imgOjbs)
      imgOjbs.forEach((img) => {

        img.parentNode.addEventListener('click', showImg)
        // 没有禁用之前直接对图片进行点击
        // img.addEventListener('click', showImg)
        //网上的第二种禁止长按保存的例子（在我这失败）
        // img.addEventListener('contextmenu', (e) => {
        //   e.preventDefault()
        // })
      })
    }
    return () => {
      if (data.doc_type === 'doc') {
        imgOjbs.forEach((img) => {
          img.removeEventListener('click', showImg)
          // img.removeEventListener('contextmenu', (e) => {
          //   e.preventDefault()
          // })
        })
      }
    }
  }, [data])
return <div>

     <div
          ref={ref}
          style={{ padding: '0.2rem' }}
          dangerouslySetInnerHTML={{ __html: data.content }}
        ></div>
     </div>