@cherdinand/e-widget

e+ widget project

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@cherdinand/e-widget
3.0.226 years ago6 years agoMinified + gzip package size for @cherdinand/e-widget in KB

Readme

storybook
ducoment: https://storybook.js.org/basics/introduction/
knobs: https://github.com/storybooks/storybook/tree/release/3.4/addons/knobs
readme: https://github.com/tuchk4/storybook-readme
e-widget
e+业务组件库

组件列表

组件

e-form


表单,API 参考链接 antd-form
e-from create() 使用方法:
import {EForm} "@kad/e-widget/lib/components/index";

@EForm.create()
export default class COMPONENT extends React.Component{
	// ...
}
经过 Form.create 包装的组件将会自带 this.props.form 属性
可接收items作为表单字段;
import {EForm} "@kad/e-widget/lib/components/index";
const formLayout = {
	labelCol: {span: 4},
        wrapperCol: {span: 20}
}

// items
const items = [
        {
            id: 'Hospital',
            label: '医院',
            span: 24,
            component: Input,
            props: {placeholder: '医院', maxLength: 20},
            decorator: {
                rules: [
                    {required: false, message: '医院不能为空'},
                ]
            },
            {...formLayout}
        }
]
...
<EForm {...others} items={items}></EForm>

e-icon


结合阿里图标库,显示icon图标
使用方法:
import {EIcon} "@kad/e-widget/lib/components/index";

// 角色管理图标 icon-jiaoseguanli,省略 icon- 字符
<EIcon icon="jiaoseguanli"/>

e-img


替代img标签
使用方法:
import {EImg} from "@kad/e-widget/lib/components/index";
import images from "./images/index"; //当前目录images文件夹下使用index导出图片

<EImg width="240" height="140" src={images.shangcheng}/>

e-menu


左侧菜单内容显示
结合ELayout,通过调用EMenu.LayoutSider布局左侧菜单栏
使用方法:
import ELayout from "@kad/e-widget/lib/components/e-layout/index";
import {EMenu} from '@kad/e-widget/lib/components';

const menus = [
        {
            name: `帮助中心`,
            key: `menu`,
            icon: '',
            href: '#',
            items: [
                {
                    name: `e药房业务指引`,
                    key: 'guide',
                    icon: '',
                    href: ''
                }
            ]
        }
    ]

<ELayout>
	<EMenu.LayoutSider>
    	<EMenu menus=menus onClick={HANDLEEVENT} />
    </EMenu.LayoutSider>
</ELayout>
参考例子 portal/help

e-layout


页面整体布局组件如下
ELayout.Header = Header;
ELayout.Footer = Footer;
ELayout.Sider = Sider;
ELayout.Content = Content;

e-modal


封装了e+ 弹窗样式 API 参考链接

e-table


表格 API参考链接
使用方法:
import {ETable} from "@kad/e-widget/lib/components";

// 注意数据源格式为对象
const dataSource = {
	Rows:[{
	    key: '1',
	    mark: true,
	    gains: "+200",
	    gainsOrigin: "e药房",
	    gainsType: "订单收益",
	    status: "未确认",
	    createTime: "2014-5-5"
	}],
	Total:1
};

...

e-search-form


搜索表单,可切换普通搜索和高级搜索, 需要设置高级搜索部分的搜索条件
使用方法:
import {ESearchForm} from "@kad/e-widget/lib/components";
import SearchFormSelect from "../search-form-select";
...

	static defaultProps = {
        items: [
            {
                id: 'createTime',
                label: '创建时间',
                component: DatePicker.RangePicker,
            },
	        {
                id: 'LoginName',
                label: '登录账户',
                component: Input,
                decorator: {},
                props: {placeholder: "请输入登录账号", maxLength: 20}
            },
            {
                id: "status",
                label: "状态",
                component: SearchFormSelect,
                props:{options: selectOptions.status || []}
            }
        ]
    };
render(){
    return(
        <ESearchForm {...this.props}/>
    );
}
	...
参考 account/container/manage

e-title-bar


内容部分头部统一样式
使用方法:
import {ETitleBar} from "@kad/e-widget/lib/components";
...

<ETitleBar title="账号管理">
        <Button icon="plus-circle-o" type="primary" onClick={this.handleAddAccount}>新增营业员账户</Button>
    </ETitleBar>
参考 account/container/manage/EButton.stories.js

e-float


设置左右浮动的元素,
使用方法:
import {EFloat} from "@kad/e-widget/lib/components";

<EFloat.Left className={styles.listHeaderLeft}>              
        <Checkbox onChange={this.handleChange}>仅显示有货</Checkbox>               
    </EFloat.Left>
源码:
...
const Left = ({className, children, ...others}) => {
    return (
        <div className={classnames(styles.left, className)} {...others}>{children}</div>
    )
};
...

e-helmet


设置title标签内容
使用方法:
import {EHelmet} from "@kad/e-widget/lib/components";

const title= titlenames('营销报表','e药房');

...
	<EHelmet title={title}/>
...

e-logo-page-header


e+logo
参考 store/order/head/EButton.stories.js

e-steps


步骤条, 参考API

e-header-radio-group


单选按钮列表,改了点样式而已,参考API

e-empty


无数据或消息时的空白提示页
import {EEmpty} from "@kad/e-widget/lib/components";
...
	<EEmpty size="middle" type="message" remark="消息为空">
	    <Button>button</Button>
	</EEmpty>
...