react悬浮球效果展示

1.需求

在开发项目时，当用户登录后，需要在主页显示一个悬浮球（可以自由拖动），点击悬浮球后，进入目标页面，如图所示：

 

2.实现

把上面需要实现的悬浮球功能写成一个组件，页面直接调用该组件即可，该组件需要使用到react-vantFloatingBall 悬浮球组件，代码如下：

主页引入悬浮球组件代码：

import FloatBall from "../../components/FloatBall";
 
const Index = () => {
 const uerInfo = getUserInfo();  // 获取用户信息
 return (
        <div>
            #判断用户是否登录，如果登录了，则引入悬浮球组件 
            {userInfo ? (<HomeInviteWheelFloatBall />) : ""}
        div>
    ）
}
 
export default Index;

悬浮球组件：

import style from "./style.less";
import {Flex,  FloatingBall} from 'react-vant';
 
const FloatBall = () => {
 
  return (
      <FloatingBall
          offset={{
              right: 100,
              bottom: 150,
          }}
          draggable
          style={{
              '--rv-floating-box-size': '60px',
              '--rv-floating-ball-z-index': 200,
          }}
          adsorb={false}
      >
          <Flex align='center' justify='center'>
              <a href="/目标页面">
                  <img src={"..."} />
              a>
          Flex>
      FloatingBall>
  );
};
 
export default FloatBall;

ok，悬浮球功能实现， 可以在Flex中添加自己需求的图片或者文案