ProFormTreeSelect 鼠标移动上展示浮动按钮
要在ProFormTreeSelect组件中实现鼠标移动上展示浮动按钮,您可以按照以下步骤进行操作:
- 导入
Tooltip和Button组件:
import { Tooltip, Button } from 'antd';
- 在ProFormTreeSelect组件中添加一个状态来控制浮动按钮的显示与隐藏:
const [showButton, setShowButton] = useState(false);
- 在ProFormTreeSelect组件的
onMouseEnter和onMouseLeave事件中分别设置showButton状态的值:
<ProFormTreeSelect
// ...其他属性
onMouseEnter={() => setShowButton(true)}
onMouseLeave={() => setShowButton(false)}
>
{/* ...树形选择器的选项 */}
</ProFormTreeSelect>
- 在ProFormTreeSelect组件的外部添加一个
Tooltip组件来展示浮动按钮,并根据showButton状态的值来控制其显示与隐藏:
<Tooltip title="浮动按钮">
{showButton && <Button type="primary" shape="circle" icon={<PlusOutlined />} />}
</Tooltip>
这样,当鼠标移动到ProFormTreeSelect组件上时,浮动按钮就会显示出来
原文地址: https://www.cveoy.top/t/topic/hJ17 著作权归作者所有。请勿转载和采集!