手搓一个半模态

1. 什么是半模态

半模态是一种介于传统模态（如弹窗）和非模态（如侧边栏）之间的交互形式。它通常表现为一个临时性的界面元素，既不会完全阻断用户与主界面的交互，又能提供额外的信息或操作。

2. 实现思路

2.1 设计目标

• 不影响主界面操作
• 提供清晰的视觉反馈
• 支持多种触发方式
• 易于扩展和维护

2.2 技术选型

• 使用 React 作为前端框架
• 采用 CSS-in-JS 方案处理样式
• 利用 React Hooks 管理状态

3. 核心代码实现

3.1 组件结构

import React, { useState } from 'react';
import styled from 'styled-components';

const SemiModal = ({ children, trigger }) => {
  const [isVisible, setIsVisible] = useState(false);

  const handleTrigger = () => {
    setIsVisible(!isVisible);
  };

  return (
    <Container>
      <Trigger onClick={handleTrigger}>
        {trigger}
      </Trigger>
      {isVisible && (
        <ModalContent>
          {children}
        </ModalContent>
      )}
    </Container>
  );
};

3.2 样式定义

const Container = styled.div`
  position: relative;
  display: inline-block;
`;

const Trigger = styled.div`
  cursor: pointer;
  padding: 8px 16px;
  background-color: #f0f0f0;
  border-radius: 4px;
  &:hover {
    background-color: #e0e0e0;
  }
`;

const ModalContent = styled.div`
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 200px;
  padding: 16px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
`;

4. 使用示例

// 在应用中使用半模态组件
const App = () => {
  return (
    <div>
      <h1>半模态示例</h1>
      <SemiModal
        trigger={<button>点击触发</button>}
      >
        <div>
          <h3>半模态内容</h3>
          <p>这是一个半模态的示例内容。</p>
          <button>确认</button>
          <button>取消</button>
        </div>
      </SemiModal>
    </div>
  );
};

5. 优化建议

5.1 动画效果

可以添加淡入淡出动画，提升用户体验：

const ModalContent = styled.div`
  /* 原有样式 */
  opacity: ${props => props.isVisible ? 1 : 0};
  transform: ${props => props.isVisible ? 'translateY(0)' : 'translateY(-10px)'};
  transition: opacity 0.3s, transform 0.3s;
`;

5.2 点击外部关闭

添加点击组件外部区域关闭的功能：

useEffect(() => {
  const handleClickOutside = (event) => {
    if (containerRef.current && !containerRef.current.contains(event.target)) {
      setIsVisible(false);
    }
  };

  document.addEventListener('mousedown', handleClickOutside);
  return () => {
    document.removeEventListener('mousedown', handleClickOutside);
  };
}, []);

6. 总结

通过以上实现，我们创建了一个简单的半模态组件。这种组件在需要提供额外信息但又不希望完全打断用户操作时非常有用。可以根据具体需求进一步扩展功能，如支持不同位置显示、多种动画效果等。