@weadmin/wecomponents NPM

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

特点

设计思想上，以实现通用组件语言规范 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工程。

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

效果展示：

demo

组件声明：

[
    {
        "component": "container",
        "items": [
            {
                "component": "form",
                "attributes": { "layout": "row" },
                "items": [
                    {
                        "name": "search",
                        "label": "搜索",
                        "component": "input",
                        "attributes": { "placeholder": "输入游戏名称进行搜索" }
                    },
                    {
                        "label": "查询",
                        "component": "submit",
                        "attributes": { "type": "primary" },
                        "events": { "submitEventName": "searchTable" }
                    }
                ]
            },
            {
                "id": "list",
                "component": "table",
                "attributes": { "placeholder": "暂无数据", "pagination": "default" },
                "items": [
                    {
                        "name": "icon",
                        "label": "游戏图标",
                        "attributes": { "width": 60, "textAlign": "center" },
                        "valueFilterName": "iconFilter"
                    },
                    { "name": "name", "label": "游戏名称" },
                    {
                        "name": "size",
                        "label": "大小",
                        "attributes": { "textAlign": "right" },
                        "valueFilterName": "sizeFilter"
                    },
                    { "name": "intro", "label": "简介" },
                    {
                        "label": "操作",
                        "name": "option",
                        "valueFilterName": "optionFilter"
                    }
                ],
                "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": "大吉大利，腾讯光子自研军事竞赛体验"
                    }
                ]
            }
        ]
    }
]