react-Popup-Component

发表于 | 更新于 | 阅读次数： 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Popup from '@/components'

export default () => {
  const [show, setShow] = useState(false);
  const openPopup = () => {
    setShow(true);
  };
  return (
    <div className="App">
      <div>
        <Popup onClose={() => setShow(false)} show={show}>
          <div>
            <p>这里是 Popup 的内容</p>
            <p>这里是 Popup 的内容</p>
            <p>这里是 Popup 的内容</p>
            <p>这里是 Popup 的内容</p>
          </div>
        </Popup>
      </div>
    </div>
  );
}
  • 弹窗容器 container
  • 弹窗蒙层 mask
  • 弹窗内容 content 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // Dom 结构
    const Comp: JSX.Element = (
      <div className={classnames("popup", className)}>
        <div className={classnames("popup-content", `mode-${mode}`)}>
          {showClose && (
            <div className="popup-close">
              <CloseOutlined onClick={handleCancel} />
            </div>
          )}
          <div className="popup-body">{children}</div>
        </div>
        <div className="popup-mask" onClick={clickModal}></div>
      </div>
    );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 移除container
const removeContainer = () => {
  setTimeout(() => {
    if (container) {
      container.parentNode?.removeChild(container);
    }
  }, 0);
};
// 关闭弹窗回调
const handleCancel = (): void => {
  setVisible(false);
  if (onClose) {
    onClose();
  }
  removeContainer();
};
// 点击蒙层事件
const clickModal = (): void => {
  if (!closeOnClickModal) return;
  handleCancel();
};

挂载组件

ReactDOM.createPortal(child, container)

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
body {
  margin: 0;
}
@keyframes modeBottom {
  from {
    bottom: -100%;
  }

  to {
    bottom: 0;
  }
}
@keyframes modeTop {
  from {
    top: -100%;
  }

  to {
    top: 0;
  }
}
@keyframes modeLeft {
  from {
    left: -100%;
  }

  to {
    left: 0;
  }
}
@keyframes modeRight {
  from {
    right: -100%;
  }

  to {
    right: 0;
  }
}
.popup {
  position: absolute;
  z-index: 999;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  .popup-mask {
    position: fixed;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    bottom: 0;
  }
  .popup-close {
    display: inline-block;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
  }
  .popup-content {
    position: fixed;
    left: 0;
    padding: 10px 10px;
    background-color: #fff;
    box-sizing: border-box;
    &.mode-center {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: auto;
      min-width: 200px;
      height: auto;
      border-radius: 10px;
    }
    @media screen and(min-width: 1200px) {
      //pc端样式和横屏ipad样式
      &.mode-center {
        width: 600px;
      }
    }
    
    &.mode-left {
      top: 0;
      width: auto;
      height: 100%;
      border-radius: 0;
      animation: modeLeft 0.2s;
    }
    &.mode-right {
      top: 0;
      left: auto;
      right: 0;
      width: auto;
      height: 100%;
      border-radius: 0;
      animation: modeRight 0.2s;
    }
    &.mode-bottom {
      width: 100%;
      bottom: 0;
      border-radius: 20px 20px 0 0;
      animation: modeBottom 0.2s;
    }
    &.mode-top {
      width: 100%;
      top: 0;
      bottom: auto;
      animation: modeTop 0.2s;
      border-radius: 0 0 20px 20px;
    }
  }
  .popup-title {
    font-size: 17px;
    color: #0b0e26;
    text-align: center;
    height: 70px;
    line-height: 70px;
  }
  .popup-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 70px;
    border-top: 1px solid #e0e0e4;
    &:last-child {
      border-radius: 0 0 20px 20px;
    }
  }
  .popup-item-title {
    font-size: 17px;
    color: #ffc235;
    text-align: center;
  }
  .popup-item-text {
    font-size: 13px;
    color: #000;
    text-align: center;
  }
  .popup-body {
    overflow-y: auto;
  }
  .popup-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 17px;
    margin-top: 12px;
    height: 52px;
    color: #ffc235;
    background-color: #fff;
    text-align: center;
    border-radius: 16px;
  }
  .active-sheet-off-btn {
    width: 24px;
    height: 24px;
  }
  .touch-active {
    background-color: #eee;
    .popup-footer {
      background-color: inherit;
    }
  }
}

codesandbox 预览

我们的生活有这么多的障碍，真他妈的有意思，这种逻辑就叫做黑色幽默。 ——王小波