{"id":24564726,"url":"https://github.com/readpage/undraw-ui","last_synced_at":"2025-05-14T11:08:51.160Z","repository":{"id":37757580,"uuid":"479253212","full_name":"readpage/undraw-ui","owner":"readpage","description":"vue评论组件，🔥基于vue3的UI组件，主要功能有评论，聊天，搜索，锚点。你的⭐️Star ，是作者开发的动力！","archived":false,"fork":false,"pushed_at":"2025-04-10T01:18:32.000Z","size":18554,"stargazers_count":983,"open_issues_count":3,"forks_count":23,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-12T20:19:37.231Z","etag":null,"topics":["typescript","vue"],"latest_commit_sha":null,"homepage":"https://readpage.github.io/undraw-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/readpage.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,"zenodo":null}},"created_at":"2022-04-08T05:14:57.000Z","updated_at":"2025-05-09T05:52:05.000Z","dependencies_parsed_at":"2023-12-19T16:14:52.304Z","dependency_job_id":"6b6f2a04-7f95-44b0-9007-9f6abb9b484b","html_url":"https://github.com/readpage/undraw-ui","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/readpage%2Fundraw-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/readpage%2Fundraw-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/readpage%2Fundraw-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/readpage%2Fundraw-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/readpage","download_url":"https://codeload.github.com/readpage/undraw-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254129482,"owners_count":22019628,"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":["typescript","vue"],"created_at":"2025-01-23T11:20:21.093Z","updated_at":"2025-05-14T11:08:51.132Z","avatar_url":"https://github.com/readpage.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://s2.loli.net/2022/04/19/m4aqSs6DINYCLjG.png\"\u003e\n  \u003c/p\u003e\n\u003cp align=\"center\"\u003e\n   \u003ca href=\"https://www.npmjs.org/package/undraw-ui\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/undraw-ui.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmcharts.com/compare/undraw-ui?minimal=true\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/undraw-ui.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/vuejs/core\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/dependencies-vue%E2%89%A53.2.25-green\"\u003e\n  \u003c/a\u003e\n\n\n\n\u003cp align=\"center\"\u003eUndraw UI - A Vue.js 3 UI library\u003c/p\u003e\n\u003ca href=\"https://hellogithub.com/repository/787564b16f214b2f851724bc140cb493\" target=\"_blank\"\u003e\u003cimg src=\"https://api.hellogithub.com/v1/widgets/recommend.svg?rid=787564b16f214b2f851724bc140cb493\u0026claim_uid=2LGtR6bWFcSuqfk\" alt=\"Featured｜HelloGitHub\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /\u003e\u003c/a\u003e\n\n## 🔥功能\n\n**折叠、评论、锚点、搜索**\n\n\n\n1. 折叠\n\n![](https://s2.loli.net/2022/04/28/frd5h8bulF7SZK6.png)\n\n\n2. 评论\n\n![](https://s2.loli.net/2022/04/28/HtGWBxsJ5LljDEU.png)\n\n\u003cp style=\"text-align: center\"\u003e暗黑主题\u003cp\u003e\n\n![img](https://gitee.com/undraw/undraw-ui/raw/master/public/docs/comment-dark.png)\n\n3. 搜索(input关键词动态滚动)\n\n![](https://s2.loli.net/2022/06/22/juvX79t6OPcaWZs.png)\n\n4. 锚点\n\n![](https://s2.loli.net/2022/04/30/r2XbGviK8FqUoRQ.png)\n\n## 入门\n\n请遵循[https://readpage.github.io/undraw-ui/](https://readpage.github.io/undraw-ui/)上的文档!\n\n## 地址\n\n- [gitee⚡️](https://gitee.com/undraw/undraw-ui)\n- [github📌](https://github.com/readpage/undraw-ui)\n\n## 安装\n\n使用`npm`安装  \n\nelement-plus可以选择需要版本\n```sh\nnpm i element-plus@2.6.0 undraw-ui@1.2.7\n```\n\n## 导入\n\n### 按需导入(推荐)\n您需要使用额外的插件来导入要使用的组件。  \n首先你需要安装 unplugin-vue-components 两款插件。\n\n```sh\nnpm install -D unplugin-vue-components\n```\n\n然后修改 vite.config.ts 或 vue.config.js 的配置。\n\n```ts\nimport Components from 'unplugin-vue-components/vite'\nimport { UndrawUiResolver } from 'undraw-ui/es/resolvers'\n\nexport default {\n  plugins: [\n    Components({\n      resolvers: [UndrawUiResolver]\n    }),\n  ],\n}\n```\n\n### 全局注册(不推荐)-选择按需导入忽略\n如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。\n```ts\nimport ElementPlus from 'element-plus'\nimport 'element-plus/dist/index.css'\n\nimport UndrawUi from 'undraw-ui'\nimport 'undraw-ui/dist/style.css'\n\nconst app = createApp(App)\napp.use(ElementPlus)\napp.use(UndrawUi)\napp.mount('#app')\n```\n\n## 使用\n\n### fold 折叠组件\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv style=\"width: 200px;\"\u003e\n    \u003cu-fold line=\"1\"\u003e\n      \u003cp\u003e每当白日依山尽，夕阳余辉便透过朵朵云层，像万道金光，如霞光万丈，把天空白云染得红彤彤，把大地山河映得金灿灿，仿佛整个世界在那一瞬间都变得金碧辉煌，热情奔放起来\u003c/p\u003e\n    \u003c/u-fold\u003e\n    \u003cu-divider /\u003e\n    \u003cu-fold line=\"2\"\u003e\n      孩子或者像孩子一样单纯的人，目的意识淡薄，沉浸在过程中，过程和目的浑然不分，他们能够随遇而安，即事起兴，不易感到无聊。商人或者像商人一样精明的人，有非常明确实际的目的，以此指导行动，规划过程，目的与过程丝丝相扣，他们能够聚精会神，分秒必争，也不易感到无聊。怕就怕既失去了孩子的单纯，又不肯学商人的精明，目的意识强烈却并无明确实际的目的，有所追求但所求不是太缥缈就是太模糊。\n    \u003c/u-fold\u003e\n    \u003c!-- 使用属性 unfold 启动展开和折叠功能 --\u003e\n    \u003cu-fold unfold line=\"1\"\u003e\n      \u003cp\u003e\n        时间不是某种从我们身上流过的东西，而就是我的生命。弃我而去的不是日历上的一个个日子，而是我生命中的岁月；甚至也不仅仅是我的岁月，而就是我自己。我不但找不回逝去的岁月，而且也找不回从前的我了。\n      \u003c/p\u003e\n    \u003c/u-fold\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n### 评论组件\n[增强功能地址](https://readpage.github.io/undraw-ui/components/comment.html)  \n[基础使用-vite模板地址](https://gitee.com/undraw/undraw-ui-demo/tree/master/Vue)  \n[组件后端相关实例](https://gitee.com/undraw/undraw-ui-demo/tree/master/Java)  \n\n\n\n## 开发交流\n\nQQ群:[undraw(682265529)](https://jq.qq.com/?_wv=1027\u0026k=NsgARkfw)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freadpage%2Fundraw-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freadpage%2Fundraw-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freadpage%2Fundraw-ui/lists"}