customize-components v1.1.6

自定义组件使用文档

• 自定义组件使用文档
  • 安装
  • 克隆
  • 组件说明
    • Footer
    • Header
    • Home
    • Sidebar
    • DrawerLayout
    • List
    • ItemMessage

安装

进入项目根目录，执行命令

yarn add mahasthama-interpreter @types/react-router-dom react-router-dom antd @ant-design/icons axios react-redux redux redux-logger

注意：以上依赖包含公司内部资源，需要更换yarn镜像地址

yarn config set registry http://dev.ciist.com:8081/repository/npm-public

克隆

复制命令将代码克隆在项目的 src 目录中

注意️：需要保证 src 目录中没有 components 命名的目录，或者更换克隆地址后面的 components 为你想要的目录，以保证能够正常克隆组件源码在项目中。

git clone http://dev.ciist.com:9000/mahasthama-proj/customize-components.git components

组件说明

• 更新注意事项
  • Header组件所有属性都变更为不是必传属性。

Footer

底部导航栏(cloud-footer)

属性表

示例

class Test extends Component {
    constructor(props, context) {
        super(props, context);

        this.state = {};
    }

    render() {
        const {} = this.state;
        return (
            <div>

            </div>
        );
    }
}

Header

头部导航栏(cloud-header)

属性表

示例

class Test extends Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            userinfo: {
                name: "何旺",
                organization: fasle
            },
            productMenus: [
                {
                    title: "乡村美旅",
                    icon: "https://main.qcloudimg.com/image/product/500/16_16/gray.svg",
                    subItem: [
                        {title: "页面配置", url: "/"},
                        {title: "信息发布", url: "/"},
                        {title: "信息主体管理", url: "/"},
                        {title: "活动管理", url: "/"}
                    ]
                },
                {
                    title: "国扶数据分析",
                    icon: "https://main.qcloudimg.com/image/product/500/16_16/gray.svg",
                    subItem: [
                        {title: "贫困户数据导出", url: "/"},
                        {title: "调度清洗", url: "/"}
                    ]
                }
            ],
            phoneNumber: "(028)1611-0258"
        };
    }

    render() {
        const {userinfo, productMenus, phoneNumber} = this.state;
        return (
            <div>
                <Header
                    userinfo={userinfo}
                    productMenus={productMenus}
                    phoneNumber={phoneNumber}
                />
            </div>
        );
    }
}

Home

云平台通用主页(cloud-home)

注：️Home组件引用了Header、Footer、Sidebar等相关组件，所以继承有相应的属性

属性表

示例

class Test extends Component {
    constructor(props, context) {
        super(props, context);

        //数据例子见相关组件示例
        this.state = {
            ...,
        };
    }

    render() {
        const {userinfo, productMenus, sidebarMenus} = this.state;
        return (
            <div>
                <Home
                    userinfo={userinfo}
                    productMenus={productMenus}
                    sidebarMenus={sidebarMenus}
                />
            </div>
        );
    }
}

Sidebar

侧边菜单栏(cloud-sidebar)

注：该组件目前仅支持二级显示，无法显示三级或多级，当数据超过三级以上时，将会引发UI交互错乱。

属性表

示例

class Test extends Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            sidebarMenus: [
                {
                    title: "概览",
                    url: "/overview",
                    icon: "https://cloudcache.tencent-cloud.com/qcloud/tcloud_dtc/static/console_aside_v4/1ef998a5-9ae2-43af-b175-32d4031a2d75.svg",
                    selectedIcon: "https://cloudcache.tencent-cloud.com/qcloud/tcloud_dtc/static/console_aside_v4/1ef998a5-9ae2-43af-b175-32d4031a2d75-hover.svg",
                    open: {
                        type: "page",
                        code: "overview"
                    }
                }, {
                    title: "分类",
                    label: true
                }, {
                    title: "服务",
                    url: "/service",
                    icon: "https://cloudcache.tencent-cloud.com/qcloud/tcloud_dtc/static/console_aside_v4/8a8468a2-0f4a-43ff-a19f-c3493f5c5410.svg",
                    selectedIcon: "https://cloudcache.tencent-cloud.com/qcloud/tcloud_dtc/static/console_aside_v4/8a8468a2-0f4a-43ff-a19f-c3493f5c5410-hover.svg",
                    externalLink: true
                }, {
                    title: "工具",
                    icon: "https://cloudcache.tencent-cloud.com/qcloud/tcloud_dtc/static/console_aside_v4/eb16fe8b-e68f-4cd9-9c29-b6cb44a6b450.svg",
                    selectedIcon: "https://cloudcache.tencent-cloud.com/qcloud/tcloud_dtc/static/console_aside_v4/eb16fe8b-e68f-4cd9-9c29-b6cb44a6b450-hover.svg",
                    subItem: [
                        {
                            title: "签名工具",
                            url: "/tool",
                            open: {
                                type: "page",
                                code: "tool"
                            }
                        }, {
                            title: "请求工具",
                            url: "https://www.baidu.com",
                            externalLink: true
                        }
                    ]
                }
            ]
        };
    }

    /**
     * 触发侧边栏菜单选项点击
     * @param menuItem 被点击的菜单项
     */
    onSidebarMenuItemClick(menuItem) {
        //输出选中菜单的信息
        console.debug("menuItem", menuItem);
    }

    render() {
        const {sidebarMenus} = this.state;
        return (
            <div>
                <Sidebar
                    sidebarMenus={sidebarMenus}
                    onMenuItemClick={this.onSidebarMenuItemClick.bind(this)}
                />
            </div>
        );
    }
}

DrawerLayout

抽屉容器组件(cloud-drawer)

属性表

示例

<DrawerLayout title="消息中心" extra="更多站内消息">
    <List dataSource={dataSource} noSourceTips="暂无消息内容" renderItem={
        (item: any, index: number) =>
            <ItemMessage
                key={index}
                content={item.content}
                description={item.description}
                time={item.time}
                //...
            />
    }/>
</DrawerLayout>

List

抽屉容器组件(cloud-list)

属性表

ItemMessage

抽屉容器组件(cloud-list)

属性表