关于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}}}

浮动Menu设计

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,
            },
          });
        },
      });
    }
  }