zeus-sidebar-menu

社区3.0-基于react版本的左侧菜单组件

效果

安装

npm install zeus-sidebar-menu

使用

ES6写法

import React from "react";
import { render } from "react-dom";
import Menu from "zeus-sidbar-menu";

//要渲染的数据，请确保有为一个key值吧
let data = [
    {
            label: "计生业务",
            key: "jsyw",
            children: [
                {
                    label: "事件管理",
                    key: "sjgl"
                },
                {
                    label: "综治业务",
                    key: "zzyw"
                },
                {
                    label: "教育积分",
                    key: "jyjf"
                }
            ]
        },
        {
            label: "决策分析",
            key: "jcfx"
        }
];
//配置字段名称
let fieldName = {
    labelField: "label",
    childrenField: "children",
    idField: "key",
    openTypeField: "openType"
};
//监听菜单点击事件,node代表当前点击的数据对象，target则是代表当前点击的dom节点
var handleClick = function (node, target) {
    console.info(node, target);
};
//菜单初始化时所选中的菜单名称
let defaultExpandName = "考核评估";
render(
    <Menu data={data} handleClick={handleClick} defaultExpandName={defaultExpandName} fieldName={fieldName}/>,
    document.getElementById("demo")
);

ES5写法

var $ = require("jquery");
var React = require("react");
var render = require("react-dom").render;
var Menu = require("../dist/components").default;
var data = [
    {
        label: "计生业务",
        key: "jsyw",
        children: [
            {
                label: "事件管理",
                key: "sjgl",
                children: [
                    {
                        label: "事件管理1",
                        key: "sjgl1"
                    },
                    {
                        label: "事件管理2",
                        key: "sjgl2"
                    }
                ]
            },
            {
                label: "综治业务",
                key: "zzyw"
            },
            {
                label: "教育积分",
                key: "jyjf"
            }
        ]
    },
    {
        label: "决策分析",
        key: "jcfx"
    },
    {
        label: "视频监控",
        key: "spjk",
        children: [
            {
                label: "考核评估",
                key: "khpg"
            },
            {
                label: "党建台账",
                key: "djtz"
            }
        ]
    }
];

var handleClick = function (node, target) {
    console.info(node, target);
};

var fieldName = {
    labelField: "label",
    childrenField: "children",
    idField: "key",
    openTypeField: "openType"
};

//菜单初始化时所选中的菜单名称
var defaultExpandName = "综治业务";

render(
    <Menu data={data} handleClick={handleClick} defaultExpandName={defaultExpandName} fieldName={fieldName}/>,
    document.getElementById("demo")
);

更新日志

• v1.1.1：修改样式；添加链接类型（window,ie,defaultBrowser,cs)图标且不能选中；增加菜单title
• v1.1.0：改善菜单收起展开效果；
• v1.0.9：增加初始化时默认选中指定菜单功能；增加说明文档；
• v1.0.8：修改菜单收起和展开为jquery的slide效果；
• v1.0.7：修改样式；只保留第一层菜单outlook风格；
• v1.0.6：基本功能展现；数据字段可配；