AlienFromStar/WeComponents

基于通用组件语言规范 (CLS) 实现的 Vue.js 声明式组件库

WeComponents 是一个基于通用组件语言规范 (CLS) 实现的 Vue.js 声明式组件库，写完 JSON 就做好了页面，让开发变得简单。

特点

设计**上，以实现通用组件语言规范 CLS 为核心，即“将所有组件抽象为统一模型”，详见通用组件语言规范(CLS)。

数据驱动

• UI 也是数据
• 以数据结构描述组件
• 以组件描述页面

开发者友好

• 低门槛，学习了一种组件语言，就学会了整个组件库的使用
• 易理解，易记忆，易使用

语义化

• 符合一般人对功能的认知
• 合适的场景，合适的支持

目前主要包含表单、列表、图表三类组件的实现，更多请查看说明文档。

使用说明

以 Vue.js 为例：

// 1. 引入组件库
import WeComponents from '@weadmin/wecomponents';

// 2. 声明页面组件
let pageFields = [
    {
        component: 'input',
        label: '标题'
    }
];

// 3. 数据绑定
export default {
    data(){
        return {
            // 初始化组件库
            page: new WeComponents(this, pageFields)
        }
    }
};

案例展示

以一个常见的查询列表需求为例。完整代码见demo工程。

需求背景：提供一个搜索框，点击查询按钮后，展示结果列表，需要支持翻页。

效果展示：

组件声明：

[
    {
        component: 'container',
        items: [
            {
                component: 'form',
                attributes: { layout: 'row' },
                items: [
                    {
                        name: 'search',
                        label: '搜索',
                        component: 'input',
                        attributes: { placeholder: '输入游戏名称进行搜索' }
                    },
                    {
                        label: '查询',
                        component: 'submit',
                        attributes: { type: 'primary', submitEventName: 'searchTable' }
                    }
                ]
            },
            {
                id: 'list',
                component: 'table',
                attributes: { placeholder: '暂无数据', pagination: 'default' },
                items: [
                    {
                        name: 'icon',
                        label: '游戏图标',
                        attributes: { width: 60, textAlign: 'center' },
                        value(v, row) {
                            return `<img src="${v}" width="28" />`;
                        }
                    },
                    { name: 'name', label: '游戏名称' },
                    {
                        name: 'size',
                        label: '大小',
                        attributes: { textAlign: 'right' },
                        value(v, row) {
                            return `${(v/1000/1000/1000).toFixed(1)} G`;
                        }
                    },
                    { name: 'intro', label: '简介' },
                    {
                        label: '操作',
                        value() {
                            return {
                                component: 'container',
                                items: [
                                    {
                                        label: '查看',
                                        component: 'button',
                                        attributes: {
                                            type: 'link', clickEventName: 'checkDetails'
                                        }
                                    }
                                ]
                            };
                        }
                    }
                ],
                value: [
                    {
                    icon: 'http://mmocgame.qpic.cn/wechatgame/HurH4elIxzLGX0FjtUic0kcQtloVbicTO6LVjWicWYwrIvUBSsve2KWz40jS2MFM5Zu/0',
                    name: '王者荣耀',
                    size: 3675556864,
                    intro: '爽快超神，腾讯5v5英雄公平对战手游'
                    },
                    {
                        icon: 'https://mmocgame.qpic.cn/wechatgame/duc2TvpEgSTLicunKH0MgcMLa8jicfvBvEXiaNAIReHzQJxhsibvgbVpIKtibgV8UcMEO/0',
                        name: '和平精英',
                        size: 3898905600,
                        intro: '大吉大利，腾讯光子自研军事竞赛体验'
                    }
                ]
            }
        ]
    }
]

参与贡献

如果你有好的意见或建议，欢迎给我们提 Issues 或 Pull Requests。 详见：CONTRIBUTING.md

腾讯开源激励计划 鼓励开发者的参与和贡献，期待你的加入。

License

所有代码采用 MIT License 开源，可根据自身团队和项目特点 fork 进行定制。