功能点：点击按钮显示下拉框，下拉框中的内容可点击，点击下拉框以外的任意位置，可隐藏下拉框
- 点击显示隐藏：
!true - 下拉框中的内容可点击(阻止冒泡):
e.nativeEvent.stopImmediatePropagation()、e.stopPropagation() - 点击下拉框以外的任意位置隐藏下拉框:
document.addEventListener('click', clickShow, false)和document.removeEventListener('click', clickShow, false)
const [status, setStatus] = useState<boolean>(false)
const clickShow = () => {
setStatus(!status)
}
useEffect(() => {
if (status) {
document.addEventListener('click', clickShow, false)
return () => {
document.removeEventListener('click', clickShow, false)
}
}
}, [status])
<Button type="primary" className="btn-width-140-height-36"
onClick={() => clickShow()} style={{ position: 'relative' }}
>
创建 <i className={`iconfont icon-a-zhankai12x12 cui-icon-right ${status ? 'rotate-180' : 'rotate-0'}`} />
{status ? (
<div
className="status-box"
onClick={(e) => {
e.nativeEvent.stopImmediatePropagation()
e.stopPropagation()
console.log('阻止冒泡')
}}
>
可点击弹框中的内容，需要阻止冒泡
</div>
) : null}
</Button>
.status-box {
position: absolute;
top: 36px;
left: 0;
z-index: 10;
width: 140px;
height: 160px;
color: black;
word-break: break-all;
background-color: #fff;
border: 1px solid @blue-base;
border-radius: 8px;
transition: all 0.3s ease-in-out;
}
