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工程。
需求背景：提供一个搜索框，点击查询按钮后，展示结果列表，需要支持翻页。
效果展示：
组件声明：
[
{
"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": "大吉大利，腾讯光子自研军事竞赛体验"
}
]
}
]
}
]如果你有好的意见或建议，欢迎给我们提 Issues 或 Pull Requests。 详见：CONTRIBUTING.md
腾讯开源激励计划 鼓励开发者的参与和贡献，期待你的加入。
所有代码采用 MIT License 开源，可根据自身团队和项目特点 fork 进行定制。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent