{"id":16440618,"url":"https://github.com/cybernika/effect-input","last_synced_at":"2025-03-21T04:33:38.786Z","repository":{"id":57219862,"uuid":"113308084","full_name":"CyberNika/effect-input","owner":"CyberNika","description":"🎊 优雅而绚丽的适用于 Vue 2.0 的 input 组件。极大提高交互效果和输入愉悦性。","archived":false,"fork":false,"pushed_at":"2018-04-22T09:53:38.000Z","size":908,"stargazers_count":72,"open_issues_count":3,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T02:26:00.942Z","etag":null,"topics":["component","effects","input","vue-components"],"latest_commit_sha":null,"homepage":"https://cybernika.github.io/effect-input/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CyberNika.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-06T11:31:58.000Z","updated_at":"2024-08-28T13:56:30.000Z","dependencies_parsed_at":"2022-08-28T23:22:50.504Z","dependency_job_id":null,"html_url":"https://github.com/CyberNika/effect-input","commit_stats":null,"previous_names":["xbt1/effect-input","cybernika/effect-input"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberNika%2Feffect-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberNika%2Feffect-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberNika%2Feffect-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberNika%2Feffect-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CyberNika","download_url":"https://codeload.github.com/CyberNika/effect-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244738841,"owners_count":20501923,"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":["component","effects","input","vue-components"],"created_at":"2024-10-11T09:12:35.057Z","updated_at":"2025-03-21T04:33:38.457Z","avatar_url":"https://github.com/CyberNika.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# effect-input\n\n[![NPM version][badge-npm-version]][url-npm]\n[![Node version][badge-node-version]][url-npm]\n[![NPM download][badge-npm-download]][url-npm]\n![Dependencies][badge-dependencies]\n![License][badge-license]\n\n优雅而绚丽的适用于 Vue 2.0 的 `input` 组件。极大提高交互效果和输入愉悦性。\n\n[![NPM][image-npm]][url-npm]\n\n\u003e 深受 [TextInputEffects][url-TextInputEffects] 的启发。\n\n\u003c!-- **中文 | [English](./README_en.md)** --\u003e\n\n## 概览\n\n[访问在线示例](https://xbt1.github.io/effect-input)\n\n## 安装\n\n```bash\n$ yarn add effect-input # npm i -S effect-input\n```\n\n## 使用\n\n一个简单的例子\n\n```javascript\nimport EffectInput from 'effect-input'\nimport 'effect-input/dist/index.css'\n\nVue.use(EffectInput)\n```\n\n```html\n\u003ctemplate\u003e\n  \u003ceffect-input v-model=\"value\" type=\"jiro\" label=\"姓名\"\u003e\u003c/effect-input\u003e\n\u003c/template\u003e\n```\n\n## 主题\n\n`effect-input` 的 `type` 属性为主题名，目前有如下主题：\n\n### `haruki`\n\n![haruki](./docs/images/haruki.gif)\n\n### `hoshi`\n\n![hoshi](./docs/images/hoshi.gif)\n\n### `kuro`\n\n![kuro](./docs/images/kuro.gif)\n\n### `jiro`\n\n![jiro](./docs/images/jiro.gif)\n\n### `minoru`\n\n![minoru](./docs/images/minoru.gif)\n\n### `yoko`\n\n![yoko](./docs/images/yoko.gif)\n\n### `hideo`\n\n![hideo](./docs/images/hideo.gif)\n\n### `kyo`\n\n![kyo](./docs/images/kyo.gif)\n\n### `akira`\n\n![akira](./docs/images/akira.gif)\n\n### `ichiro`\n\n![ichiro](./docs/images/ichiro.gif)\n\n### `juro`\n\n![juro](./docs/images/juro.gif)\n\n### `madoka`\n\n![madoka](./docs/images/madoka.gif)\n\n### `kaede`\n\n![kaede](./docs/images/kaede.gif)\n\n### `isao`\n\n![isao](./docs/images/isao.gif)\n\n\n## 开发\n\n```bash\n$ npm install\n$ npm run dev\n```\n\n## 构建\n\n```bash\n$ npm run build:package # 构建 npm 包\n$ npm run build:example # 构建示例站点\n$ npm run build # build:package \u0026 build:example\n```\n\n## TODOs\n\n- 添加更多主题\n  - SET 2\n    - [x] `manami`\n    - [x] `nariko`\n    - [ ] `nao`\n    - [ ] `yoshiko`\n    - [ ] `shoko`\n    - [ ] `chisato`\n    - [ ] `makiko`\n    - [ ] `sae`\n    - [ ] `kozakura`\n    - [ ] `fumi`\n    - [ ] `ruri`\n    - [ ] `kohana`\n\n## 更新日志\n\n详见 [releases][url-releases]\n\n\n[badge-npm-version]: https://img.shields.io/npm/v/effect-input.svg\n[badge-node-version]: https://img.shields.io/node/v/effect-input.svg\n[badge-npm-download]: https://img.shields.io/npm/dt/effect-input.svg\n[badge-license]: https://img.shields.io/github/license/xbt1/effect-input.svg\n[badge-dependencies]: https://img.shields.io/david/dev/xbt1/effect-input.svg\n\n[url-TextInputEffects]: https://tympanus.net/Development/TextInputEffects/index.html\n[url-npm]: https://npmjs.org/package/effect-input\n[url-dependencies]: https://david-dm.org/vkbansal/effect-input\n[url-releases]: https://github.com/XBT1/effect-input/releases\n\n[image-npm]: https://nodei.co/npm/effect-input.png\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcybernika%2Feffect-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcybernika%2Feffect-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcybernika%2Feffect-input/lists"}