react中如何在一张图片上加一个灰色蒙层，并添加事件？

news2024/11/18 15:01:34

最终效果：

在这里插入图片描述

实现原理：

移动到图片上的时候，给img加一个伪类
！！此时就要地方要注意了，因为img标签是闭合的标签，无法直接添加伪类（::after），所以
我是在img外层加了一个span标签，方便加上伪类，实现浮层的效果
给元素绑定对应的点击事件

废话不多说，上代码！！！！

// 鼠标移动到图片时，将图片包裹在span标签中
  const handleHover = (event: any) => {
    if (event.target.tagName.toLowerCase() === 'img') {
      // 确保只对img标签进行操作
      const imgElement = event.target;
      // 检查img元素是否已经被包裹在一个具有'class="wrapper"'的div里
      if (
        imgElement.parentNode &&
        imgElement.parentNode.tagName.toLowerCase() === 'span' &&
        imgElement.parentNode.classList.contains('wrapper')
      ) {
        return; // 如果已经包裹了就退出函数
      }

      // 创建一个新的div元素
      const wrapper = document.createElement('span');
      wrapper.className = 'wrapper'; // 给新的div设置类名以便于CSS控制

      // 将img元素插入到新的div中
      imgElement.parentNode.insertBefore(wrapper, imgElement); // 在img之前插入wrapper
      wrapper.appendChild(imgElement); // 把img移到wrapper里
    }
  };

  useEffect(() => {
    window.addEventListener('click', handleClickHtmlContent);

    const container: any = document.getElementById('container');

    // 监听所有img标签的mouseover事件
    container?.addEventListener('mouseover', handleHover);

    return () => {
      window.removeEventListener('click', handleClickHtmlContent);
      container?.removeEventListener('mouseover', handleHover);
    };
  }, []);



// 点击html渲染区域的图片时，调起Antd组件Image的预览
  const handleClickHtmlContent = (e: any) => {
    if (e.target.closest('#container p .wrapper')) {
      const url = e.target.querySelector('img')?.src;
      Modal.confirm({
        title: '确认发送该图片？',
        centered: true,
        icon: null,
        content: (
          <img width={360} src={url} />
        ),
        okText: '确认',
        onOk: () => {
          console.log('确认发送');
        },
      });
    }
  };


// html
<div id="container">
 <img src="123.png"/>
</div>


// css

#container {
  .wrapper {
    position: relative;
    display: inline-block;
    &:hover {
      cursor: pointer;
      box-shadow: 0 0 5px #ccc;
      &::after {
        opacity: 1;
      }
    }
    &::after {
      content: '点击发送图片';
      position: absolute;
      text-align: center;
      align-content: center;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      max-height: 250px;
      color: #fff;
      background: rgba(0, 0, 0, 0.5); /* 示例背景色 */
      opacity: 0; /* 初始状态隐藏 */
      transition: opacity 0.3s ease; /* 添加过渡效果 */
    }
  }
  img {
    max-height: 250px;
    width: auto !important;
  }
}