关于react.js:react开发侧边栏背景与浮动Menu设计

step1: 导入背景图片

background-image: url(../../assets/menu-background.png);
background-repeat:no-repeat ;
background-size: cover;

step2: 设置背景图片高度

父盒子高度就是所有可见区高度

height:100%;

父盒子高度中蕴含其余盒子

height: ~'calc(100% - @{layout-header-height})';

背景图片须要设计为滚动条可见区高度

const scrollHight = document.body.scrollHeight;
style={{height:{scrollHight}}}

step1: 导入 andt 组件 <Menu>

`import {Menu} from 'antd';`

step2:<div>(menu 的父元素) 中导入 menu 的背景图片并设置浮动

background-image: url(../../assets/menu-focusing.png);
background-repeat:no-repeat ;
background-size: cover;
position: fixed;

step3: 写出 menu 的 style 和题目

<Menu className={addStyles.newStyle}>
<SubMenu title="我的项目合集" className={addStyles.writeSize}>
{this.getProjectData()}
</SubMenu>
<div className={addStyles.backLogo} /

step4：getProjectData() 函数获取数据，并获得前 5(NUMBER_FIVE) 条数据，再通过数据驱动生成 menuitem

获取数据

getProjectData = () => {const { ProjectModel = {} } = this.props;
    const {Topdata = [""] } = ProjectModel;
    const getedData = [];
    for (let i = 0; i < Topdata.length; i += 1) {if (Topdata.length !== 0) {const { projectName = [] } = Topdata[i];
        getedData[i] = projectName;
      }
    }
    if (getedData.length >NUMBER_FIVE) {for (let j = NUMBER_FIVE; j <= getedData.length - 1; j += 1) {getedData.pop();
      }
    }
    return (getedData.map((rigthData) => (this.createProjectMenu(rigthData)
      )))
  }

createProjectMenu() 函数生成 menuitem

  createProjectMenu = (rigthData) => {const { changeStyle = ''} = this.state;
    const {ProjectModel = {} } = this.props;
    const {Topdata = [""] } = ProjectModel;
    return (
      <div>
        <Menu>
          <Menu.Item className={addStyles.menuItemStyle}>
            <Button onClick={this.goTheProject} className={addStyles.buttonStyle}>
              {rigthData}
            </Button>
          </Menu.Item>
          <span>
            <Button className={addStyles.anoButtonStyle} onClick={() => this.changeIcon(Topdata)}>
              <Icon type="star" style={{fontSize: '30px'}} theme={changeStyle === 1 ? ("twoTone") : ("")} twoToneColor={changeStyle === 1 ? ("#52c41a") : ("")} />
            </Button>
          </span>
        </Menu>
      </div>
    )
  }

goTheProject() 函数：通过点击事件进行跳转，跳转到该项目标详情页面

goTheProject = () => {router.push({ pathname: '/Project/ProjectBranch'});
  }

changeIcon() 函数：通过点击图标进行珍藏和勾销珍藏

const {confirm} = Modal;
changeIcon = (record) => {const { isChange} = this.state;
    const {dispatch, ProjectModel: { pagination} } = this.props;
    const data = record[0];
    const {id = ''} = data;

    this.setState({visible: true})

    if (isChange === 1) {
      this.setState(
        {
          changeStyle: 0,
          isChange: 0,
        }
      )
      confirm({
        title: ` 是否勾销珍藏所选我的项目 `,
        okText: '确定',
        cancelText: '勾销',
        onOk: () => {
          dispatch({
            type: 'ProjectModel/deleteTopProject',
            payload: {
              data: {projectId: id,},
              pagination,
            },
          });
        },
      });
    } else {
      this.setState(
        {
          changeStyle: 1,
          isChange: 1,
        }
      )
      confirm({
        title: ` 是否珍藏所选我的项目 `,
        okText: '确定',
        cancelText: '勾销',
        onOk: () => {
          dispatch({
            type: 'ProjectModel/topProject',
            payload: {
              data: {projectId: id,},
              pagination,
            },
          });
        },
      });
    }
  }

关于react.js:react开发侧边栏背景与浮动Menu设计

侧边栏背景设计：

浮动 Menu 设计