dpcomponents

DPComponets ui component for react

Usage no npm install needed!

<script type="module">
  import dpcomponents from 'https://cdn.skypack.dev/dpcomponents';
</script>

README

API

参数 必选 类型 说明
userData ture object 用于显示用户的信息，接收通过ifLogin接口返回的数据（显示项目相关菜单，需要扩展字段，例子：{...userData, showProject:true}）
leftMenu false array 头部菜单左边部分，预设属性Header.navs(平台能力), Header.application(应用开放), Header.solution(解决方案)
rightMenu false array 头部菜单右边部分, 预设属性Header.search(搜索功能) 自定义参数格式{data: object

示例

1. 第三方业务主要使用方式
...const data = await ifLogin()
<Header userData={data}/>

2. 开启部分预置功能
<Header leftMenu=[Header.navs] rightMenu=[Header.search] userData={data}/>

3. 添加自定义菜单
    a. 增加简单单击菜单
    var eMenu = {
    data: {
        key: '/documents', 
        value: '文档与支持' 
    }, 
    
    onClick: ()=> {console.log('点击回调')},
    render: ()=> {console.log('hover回调')} //hover触发渲染，父容器在头部
    
    }
    <Header leftMenu=[Header.navs] rightMenu=[Header.search] userData={data}/>

markdown 插件使用

npm i --save markdown-it
npm i --save simplemde

import {EditTree, ReactSimpleMDE, ReactMarkDownPreview} from 'dpcomponents';
EditTree //可编辑的树插件
ReactSimpleMDE  //在线markdown插件
ReactMarkDownPreview  //渲染md插件