{"id":19965547,"url":"https://github.com/tencent/wecomponents","last_synced_at":"2025-04-06T08:11:29.658Z","repository":{"id":49546562,"uuid":"221605167","full_name":"Tencent/WeComponents","owner":"Tencent","description":"基于通用组件语言规范 (CLS) 实现的 Vue.js 声明式组件库","archived":false,"fork":false,"pushed_at":"2021-06-15T07:11:28.000Z","size":1740,"stargazers_count":277,"open_issues_count":0,"forks_count":32,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-30T07:11:13.518Z","etag":null,"topics":["cls","declarative-ui","ui-components","vue"],"latest_commit_sha":null,"homepage":"https://tencent.github.io/WeComponents/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tencent.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-14T03:39:11.000Z","updated_at":"2025-03-05T16:30:53.000Z","dependencies_parsed_at":"2022-07-29T18:39:51.587Z","dependency_job_id":null,"html_url":"https://github.com/Tencent/WeComponents","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2FWeComponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2FWeComponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2FWeComponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2FWeComponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tencent","download_url":"https://codeload.github.com/Tencent/WeComponents/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247451652,"owners_count":20940939,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cls","declarative-ui","ui-components","vue"],"created_at":"2024-11-13T02:29:27.097Z","updated_at":"2025-04-06T08:11:29.631Z","avatar_url":"https://github.com/Tencent.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"logo.png\" width=\"400\" height=\"100\" /\u003e\n\nWeComponents 是一个基于通用组件语言规范 (CLS) 实现的 Vue.js 声明式组件库，写完 JSON 就做好了页面，让开发更简单。\u003c/p\u003e\n\n[![License](https://img.shields.io/npm/l/%40weadmin%2Fwecomponents)](https://github.com/Tencent/WeComponents/blob/master/LICENSE) [![Build Status](https://travis-ci.org/Tencent/WeComponents.svg?branch=master)](https://travis-ci.org/Tencent/WeComponents) [![Coverage Status](https://coveralls.io/repos/github/Tencent/WeComponents/badge.svg?branch=master)](https://coveralls.io/github/Tencent/WeComponents?branch=master) [![Npm Version](https://img.shields.io/npm/v/@weadmin/wecomponents)](https://www.npmjs.com/package/@weadmin/wecomponents)\n\n## 特点\n\n设计思想上，以实现通用组件语言规范 CLS 为核心，即“将所有组件抽象为统一模型”，详见[通用组件语言规范](https://tencent.github.io/WeComponents/#/doc/principle/cls)。\n\n**数据驱动**\n* UI 也是数据\n* 以数据结构描述组件\n* 以组件描述页面\n\n**开发者友好**\n* 低门槛，学习了一种组件语言，就学会了整个组件库的使用\n* 易理解，易记忆，易使用\n\n**语义化**\n* 符合一般人对功能的认知\n* 合适的场景，合适的支持\n\n目前主要包含表单、列表、图表三类组件的实现，更多请查看[说明文档](https://tencent.github.io/WeComponents/)。\n\n## 使用说明\n\n以 Vue.js 为例：\n\n```javascript\n// 1. 引入组件库\nimport WeComponents from '@weadmin/wecomponents';\n\n// 2. 声明页面组件\nlet pageFields = [\n    {\n        component: 'input',\n        label: '标题'\n    }\n];\n\n// 3. 数据绑定\nexport default {\n    data(){\n        return {\n            // 初始化组件库\n            page: new WeComponents(this, pageFields)\n        }\n    }\n};\n```\n\n\n## 案例展示\n\n以一个常见的查询列表需求为例。完整代码见[demo工程](https://github.com/weadmin/WeComponentsDemo)。\n\n**需求背景**：提供一个*搜索框*，点击*查询按钮*后，展示*结果列表*，需要支持*翻页*。\n\n**效果展示**：\n\n![demo](demo.png)\n\n**组件声明**：\n\n```javascript\n[\n    {\n        \"component\": \"container\",\n        \"items\": [\n            {\n                \"component\": \"form\",\n                \"attributes\": { \"layout\": \"row\" },\n                \"items\": [\n                    {\n                        \"name\": \"search\",\n                        \"label\": \"搜索\",\n                        \"component\": \"input\",\n                        \"attributes\": { \"placeholder\": \"输入游戏名称进行搜索\" }\n                    },\n                    {\n                        \"label\": \"查询\",\n                        \"component\": \"submit\",\n                        \"attributes\": { \"type\": \"primary\" },\n                        \"events\": { \"submitEventName\": \"searchTable\" }\n                    }\n                ]\n            },\n            {\n                \"id\": \"list\",\n                \"component\": \"table\",\n                \"attributes\": { \"placeholder\": \"暂无数据\", \"pagination\": \"default\" },\n                \"items\": [\n                    {\n                        \"name\": \"icon\",\n                        \"label\": \"游戏图标\",\n                        \"attributes\": { \"width\": 60, \"textAlign\": \"center\" },\n                        \"valueFilterName\": \"iconFilter\"\n                    },\n                    { \"name\": \"name\", \"label\": \"游戏名称\" },\n                    {\n                        \"name\": \"size\",\n                        \"label\": \"大小\",\n                        \"attributes\": { \"textAlign\": \"right\" },\n                        \"valueFilterName\": \"sizeFilter\"\n                    },\n                    { \"name\": \"intro\", \"label\": \"简介\" },\n                    {\n                        \"label\": \"操作\",\n                        \"name\": \"option\",\n                        \"valueFilterName\": \"optionFilter\"\n                    }\n                ],\n                \"value\": [\n                    {\n                        \"icon\": \"http://mmocgame.qpic.cn/wechatgame/HurH4elIxzLGX0FjtUic0kcQtloVbicTO6LVjWicWYwrIvUBSsve2KWz40jS2MFM5Zu/0\",\n                        \"name\": \"王者荣耀\",\n                        \"size\": 3675556864,\n                        \"intro\": \"爽快超神，腾讯5v5英雄公平对战手游\"\n                    },\n                    {\n                        \"icon\": \"https://mmocgame.qpic.cn/wechatgame/duc2TvpEgSTLicunKH0MgcMLa8jicfvBvEXiaNAIReHzQJxhsibvgbVpIKtibgV8UcMEO/0\",\n                        \"name\": \"和平精英\",\n                        \"size\": 3898905600,\n                        \"intro\": \"大吉大利，腾讯光子自研军事竞赛体验\"\n                    }\n                ]\n            }\n        ]\n    }\n]\n```\n\n\n## 参与贡献\n\n如果你有好的意见或建议，欢迎给我们提 Issues 或 Pull Requests。\n详见：[CONTRIBUTING.md](./CONTRIBUTING.md)\n\n[腾讯开源激励计划](https://opensource.tencent.com/contribution) 鼓励开发者的参与和贡献，期待你的加入。\n\n## License\n\n所有代码采用 [MIT License](http://opensource.org/licenses/MIT) 开源，可根据自身团队和项目特点 `fork` 进行定制。 \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencent%2Fwecomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftencent%2Fwecomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencent%2Fwecomponents/lists"}