darth-privilege-ui v1.0.2

UI-Components

公司内部项目UI标准React组件库。

支持环境

• 现代浏览器和 IE11 及以上。
• 内部css使用的sass预处理语言
• 国际化采用i18n

说明

• 内部css使用的sass预处理语言
• 国际化采用i18n， 需要在将内部的国际语言配置项目的国际话配置中 import{privilege_en， privilege_cn} from darth-privilege-ui/language
• 获取内部store import{stores} from darth-privilege-ui import{stores as privilegeStores} from darth-privilege-ui 在入口文件中

const App = () => {
const allStore = {...stores, ...privilegeStores}
    return (
        <Provider {...stores}>
            <StoresContext.Provider value={allStore}>
                <BrowserRouter>
                    <div>
                        {renderRoutes(routers)}
                    </div>
                </BrowserRouter>
            </StoresContext.Provider>
        </Provider>
    )
};

安装

npm install --save darth-privilege-ui

示例

功能组件

import{PrivilegeFeature} from darth-privilege-ui
const p => props => {


    return (
        <div className="test">
            <MenuList data={menuData} onSelectMenu={onSelectMenu} />
            <PrivilegeFeature
               {...props}
            />
        <div>
    )
}

export default p

角色组件

import{PrivilegeRole} from darth-privilege-ui
const p => props => {


    return (
        <div className="test">
            <MenuList data={menuData} onSelectMenu={onSelectMenu} />
            <PrivilegeRole
               {...props}
            />
        <div>
    )
}

export default p

角色详情

详情路由举例: 'role/detail/:id'

import{RoleDetail} from darth-privilege-ui
import React from 'react';
import {MenuList} from "../../common";
const DemoRoleDeatil = props => {
    const menuData = [
        {
            id:'1',
            title: '功能管理',
        },{
            id:'2',
            title: '角色管理',
        }
    ]

    const onSelectMenu = e => {
        console.log(e, 'memu')
    }
    return(
        <div style={{    display: 'flex',height: '100%'}}>
            <MenuList data={menuData} onSelectMenu={onSelectMenu} />
            <RoleDetail {...props}/>
        </div>
    )
}

export default DemoRoleDeatil;