{"id":15019602,"url":"https://github.com/wocwin/t-ui","last_synced_at":"2025-05-15T18:06:46.485Z","repository":{"id":43140240,"uuid":"242684887","full_name":"wocwin/t-ui","owner":"wocwin","description":"Vue 项目中基于Element-ui 二次封装基础组件文档；Vue基础组件文档","archived":false,"fork":false,"pushed_at":"2025-03-21T10:53:23.000Z","size":36088,"stargazers_count":253,"open_issues_count":9,"forks_count":51,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-01T03:28:01.596Z","etag":null,"topics":["ant-design-vue","component","components","element-ui","form","select","table","tree","vue","vue2","vue3","vuepress","webpack","wocwin"],"latest_commit_sha":null,"homepage":"https://wocwin.github.io/t-ui/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wocwin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-24T08:36:46.000Z","updated_at":"2025-03-21T10:42:28.000Z","dependencies_parsed_at":"2024-01-15T09:10:21.978Z","dependency_job_id":"162e56e5-e691-4b60-94f4-46471f5f4a61","html_url":"https://github.com/wocwin/t-ui","commit_stats":{"total_commits":370,"total_committers":4,"mean_commits":92.5,"dds":"0.010810810810810811","last_synced_commit":"43c19c93552491f8af8ab311c5d240650f928e68"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wocwin%2Ft-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wocwin%2Ft-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wocwin%2Ft-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wocwin%2Ft-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wocwin","download_url":"https://codeload.github.com/wocwin/t-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247584111,"owners_count":20962075,"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":["ant-design-vue","component","components","element-ui","form","select","table","tree","vue","vue2","vue3","vuepress","webpack","wocwin"],"created_at":"2024-09-24T19:53:45.284Z","updated_at":"2025-04-08T04:10:19.586Z","avatar_url":"https://github.com/wocwin.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# T-ui\n\n## [Vue3 基础组件传送门](https://github.com/wocwin/t-ui-plus)\n\n\u003e 基于 Element-plus 二次封装基础组件地址\n\n## [T-ui使用Demo项目](https://github.com/wocwin/wocwin-vue2)\n\n\u003e`wocwin-vue2`是常规基于Vue2、Vuex、webpack 开源的一套后台管理模板；此项目全面使用了`T-ui`二次封装基础组件库\n\n## 介绍\n\n\u003e 基于 Element-ui 二次封装组件\n\n这是我在学习 Vue 中基于[Element-ui](https://element.faas.ele.me/#/zh-CN) 二次封装基础组件文档，希望对你有用。可查看 [详细组件案例文档](https://wocwin.github.io/t-ui/) 预览\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/vuejs/vue\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/vue-2.6.14-brightgreen.svg\" alt=\"vue\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://gitee.com/wocwin/t-ui/stargazers\"\u003e\n    \u003cimg src=\"https://gitee.com/wocwin/t-ui/badge/star.svg?theme=dark\" alt=\"t-ui\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/wocwin/t-ui/stargazers\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/wocwin/t-ui.svg\" alt=\"t-ui\"\u003e\n  \u003c/a\u003e\n   \u003ca href=\"https://www.npmjs.com/package/@wocwin/t-ui\" target=\"_blank\"\u003e\n      \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/@wocwin/t-ui.svg\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n## 拆分基于ant-design-vue封装的组件（1.1.2版本）\n\n\u003e### [Vue2 基于ant-design-vue封装基础组件地址](https://github.com/wocwin/t-antd-ui)\n\n## 动态效果图\n\n\u003cimg src=\"./public/Tui__demo.gif\"\u003e\n\n## npm 方式安装使用\n\u003e ### 前提条件：使用项目必须全局注册 Element-ui组件库\n\n```js\n// 先安装\nnpm i @wocwin/t-ui\n// 1、 在main.js中按下引入(全局使用)\nimport Tui from '@wocwin/t-ui'\nVue.use(Tui)\n\n// 2、按需引入，在单个vue文件如下引入，在注册；或者在main.js中如下引入在注册，皆可！\nimport { TTable, TLayoutPage, TLayoutPageItem, TForm, TQueryCondition } from '@wocwin/t-ui'\n\n```\n\n## Copy packages文件夹在项目中全局使用\n\n```js\n// 1、把packages文件夹复制，放在自己项目中\n// 2、假设 packages 与 src是同级，那么src下 main.js 如下操作即可全局使用t-ui\nimport Tui from '../packages'\nVue.use(Tui)\n```\n\n## 浏览器直接引入使用（Use CDN in Project）(v1.3.0支持)--建议使用npm安装使用\n```html\n\u003chead\u003e\n  \u003c!-- Import elemtn-ui style --\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003ct-select\n      placeholder=\"请选择工序\"\n      v-model=\"selectVlaue\"\n      :option-source=\"stepList\"\n      value-key=\"label\"\n      style=\"width: 200px;\"\n      @change=\"selectChange\"\n    \u003e\u003c/t-select\u003e\n  \u003c/div\u003e\n  \u003c!-- Import Vue  --\u003e\n  \u003cscript src=\"https://unpkg.com/vue@2.6.11/dist/vue.js\"\u003e\u003c/script\u003e\n  \u003c!-- Import elemtn-ui --\u003e\n  \u003cscript src=\"https://unpkg.com/element-ui/lib/index.js\"\u003e\u003c/script\u003e\n  \u003c!-- 引入t-ui的组件库 --\u003e\n  \u003cscript src=\"https://unpkg.com/@wocwin/t-ui@latest\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003cscript\u003e\n   new Vue({\n    el: '#app',\n    data() {\n      return {\n        selectVlaue: null,\n        stepList: [\n          { label: '开始', id: 1 },\n          { label: 'POSUI', id: 2 },\n          { label: '11', id: 3 },\n          { label: 'GX123', id: 4 },\n          { label: '烘干破碎', id: 5 },\n          { label: '车间仓库', id: 6 },\n          { label: 'ui3333', id: 7 },\n          { label: 'hhh333', id: 8 }]\n      }\n    },\n    methods: {\n      // 复选框\n      selectChange(val) {\n        console.log('selectChange', val, this.selectVlaue)\n      }\n    }\n  })\n\u003c/script\u003e\n\n```\n\n## 全部组件如下\n| 组件名称        | 说明                                                                                                                                                      |\n| :-------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| TLayoutPage     | 布局页面                                                                                                                                                  |\n| TLayoutPageItem | 布局页面子项                                                                                                                                              |\n| TAdaptivePage   | [一屏组件](https://wocwin.github.io/t-ui/baseComponents/TAdaptivePage/base.html?_blank)（继承TTable 及 TQueryCondition 组件的所有属性、事件、插槽、方法） |\n| TQueryCondition | [条件查询组件](https://wocwin.github.io/t-ui/baseComponents/TQueryCondition/base.html?_blank)                                                             |\n| TTable          | [表格组件](https://wocwin.github.io/t-ui/baseComponents/TTable/base.html?_blank)                                                                          |\n| TForm           | [表单组件](https://wocwin.github.io/t-ui/baseComponents/TForm/base.html?_blank)                                                                           |\n| TSelectTable    | [下拉选择表格组件](https://wocwin.github.io/t-ui/baseComponents/TSelectTable/radio.html?_blank)                                                           |\n| TSelect         | [下拉选择组件](https://wocwin.github.io/t-ui/baseComponents/TSelect/base.html?_blank)                                                                     |\n| TDetail         | [详情组件](https://wocwin.github.io/t-ui/baseComponents/TDetail/base.html?_blank)                                                                         |\n| TButton         | [防抖按钮组件](https://wocwin.github.io/t-ui/baseComponents/TButton/base.html?_blank)                                                                     |\n| TStepWizard     | [步骤条组件](https://wocwin.github.io/t-ui/baseComponents/TStepWizard/base.html?_blank)                                                                   |\n| TTimerBtn       | 定时按钮组件                                                                                                                                              |\n| TModuleForm     | [模块表单/详情组件](https://wocwin.github.io/t-ui/baseComponents/TModuleForm/base.html?_blank)                                                            |\n| TDatePicker     | [日期选择器组件](https://wocwin.github.io/t-ui/baseComponents/TDatePicker/base.html?_blank)                                                               |\n| TInput          | [input组件](https://wocwin.github.io/t-ui/baseComponents/TInput/base.html?_blank)                                                                         |\n| TDialog         | [弹窗组件](https://wocwin.github.io/t-ui/baseComponents/TDialog/base.html?_blank)                                                                         |\n| TTreeSelect     | [下拉树形结构组件](https://wocwin.github.io/t-ui/baseComponents/TTreeSelect/base.html?_blank)                                                             |\n\n## 安装依赖\n\n```shell\nnpm install\n\u003enodeJs版本小于16\n\u003enodeJs版本大于16：需在`package.json`的`scripts`命令中添加`SET NODE_OPTIONS=--openssl-legacy-provider`\n```\n\n## 本地运行 src 中组件示例\n\n```shell\nnpm run serve\n```\n\n## 本地运行 vuepress 中组件文档\n\n```shell\nnpm run docs:dev\n\n```\n## Thanks to all the contributors\n\n\u003ca href=\"https://github.com/wocwin/t-ui/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=wocwin/t-ui\" alt=\"contributors\" /\u003e\n\u003c/a\u003e\n\n## 微信交流群\n\n\u003e目前微信群已超过 200 人，需要加微信好友(请备注 T-ui)，拉大家进群\n\n|                微信二维码                 |\n| :---------------------------------------: |\n| \u003cimg src=\"./public/wocwin.jpg\" width=170\u003e |\n\n## Git 提交规范\n\n- `ci`: ci 配置文件和脚本的变动;\n- `chore`: 构建系统或辅助工具的变动;\n- `fix`: 代码 BUG 修复;\n- `feat`: 新功能;\n- `perf`: 性能优化和提升;\n- `refactor`: 仅仅是代码变动，既不是修复 BUG 也不是引入新功能;\n- `style`: 代码格式调整，可能是空格、分号、缩进等等;\n- `docs`: 文档变动;\n- `test`: 补充缺失的测试用例或者修正现有的测试用例;\n- `revert`: 回滚操作;\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwocwin%2Ft-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwocwin%2Ft-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwocwin%2Ft-ui/lists"}