zoukankan      html  css  js  c++  java
  • 框架搭建

    1、整体分析

    公共部分:侧边栏、头部、尾部

    实现:src下components创建NavLeft、Header、Footer文件夹,在文件夹里分别创建index.js、index.css

    主页:src下admin.js和admin.css,并修改app.js的引入admin;admin.js引入公共部分:如:import Header from './components/Header'(会自动定位到Header文件夹下的index.js)

    侧边栏目录数据:

    const menuList=[
        {
            title:'首页',
            key:'admin/home'
        },
        {
            title:'UI',
            key:'admin/ui',
            children:[
                {
                    title:'按钮',
                    key:'admin/ui/button'
                },
            ]
        },
    ]
    

     渲染侧边栏:使用递归

    renderMenu=(data)=>{
      return data.map((item)=>{
        //如果有子层,递归调用自己
        if(item.children){
          return <SubMenu title={item.title} key={item.key}>
                      {this.renderMenu(item.children)}
                  </SubMenu>
        }
        //如果没有子层,返回
        return <Menu.Item title={item.title} key={item.key}>
                    {item.title}
                  </Menu.Item>
      })  
    }
    

      公共方法或者调用第三方组件可以单独写在一个文件里

    export default class Methods{
        static methods(){}
    .....
    }
    使用:import   method from ‘url’
    method.methods()   
    

      在less中使用预定义颜色

          @import '../../url'

  • 相关阅读:
    luogu P1415 拆分数列 序列DP
    [HAOI2015]树上操作
    [SHOI2012]魔法树
    [SCOI2010]连续攻击游戏
    [NOI2016]区间
    简单数论(一)
    iermu爱耳目
    李宇春:会跳舞的文艺青年
    文峰塔很安祥
    技术宅之flappy bird 二逼鸟
  • 原文地址:https://www.cnblogs.com/shui1993/p/10907799.html
Copyright © 2011-2022 走看看