{"id":18742068,"url":"https://github.com/limintao/vue-turn-clock","last_synced_at":"2025-04-12T21:13:01.481Z","repository":{"id":174088135,"uuid":"651075091","full_name":"limintao/vue-turn-clock","owner":"limintao","description":"Vue 翻滚时钟插件！","archived":false,"fork":false,"pushed_at":"2024-03-18T08:28:13.000Z","size":175,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T21:12:55.465Z","etag":null,"topics":["clock","countdown","flip","flip-clock","time","ts","typescript","vite","vue","vue3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/limintao.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}},"created_at":"2023-06-08T12:43:07.000Z","updated_at":"2024-08-05T09:55:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"edaf8785-bb20-4238-ad90-e371ed8de020","html_url":"https://github.com/limintao/vue-turn-clock","commit_stats":null,"previous_names":["limintao/vue-turn-clock"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/limintao%2Fvue-turn-clock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/limintao%2Fvue-turn-clock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/limintao%2Fvue-turn-clock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/limintao%2Fvue-turn-clock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/limintao","download_url":"https://codeload.github.com/limintao/vue-turn-clock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631681,"owners_count":21136562,"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":["clock","countdown","flip","flip-clock","time","ts","typescript","vite","vue","vue3"],"created_at":"2024-11-07T16:05:48.967Z","updated_at":"2025-04-12T21:13:01.460Z","avatar_url":"https://github.com/limintao.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-turn-clock  [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/limintao/vue-turn-clock/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/vue-turn-clock.svg?style=flat)](https://www.npmjs.com/package/vue-turn-clock) [![npm](https://img.shields.io/npm/dt/vue-turn-clock.svg)](https://www.npmjs.com/package/vue-turn-clock)\n\n这是一个简单的翻页倒计时组件，也可以是展示当前时间！\n\n- 💪 支持 Vue 3 组合式 API\n- 🔥 使用 TypeScript 编写\n\n### 安装\n\nWith NPM:\n```\nnpm install vue-turn-clock\n```\nWith Yarn:\n```\nyarn add vue-turn-clock\n```\nWith PNPM:\n```\npnpm add vue-turn-clock\n```\n\n### 使用\n\n```vue\nimport TurnClock from 'vue-turn-clock';\n\n\u003cTurnClock @over=\"timeOverEvent\" endTime=\"2023-06-10\" /\u003e\n```\n\n### 参数配置\n| 名称        | 类型 | 默认 | 说明 |\n|-----------| -- | -- |------------------------------------------------------------------------------------|\n| startTime | Date/Number/String | Date.now() | 需要设置当前的初始化系统时间，可以是Date对象，也可以是时间戳，亦可是一个可被转换的时间字符串，主要用来防止用户修改电脑时间，设置初始化服务器时间 |\n| endTime   | Date/Number/String | -- | 需要倒计时的时间，可以是Date对象，也可以是时间戳，亦可是一个可被转换的时间字符串 |\n| formatter | String | YYYY-MM-DD HH:mm:ss | 当仅显示日期格式时，可限制显示的日期格式，可选的字符格式：['YYYY', 'MM', 'DD', 'HH', 'mm', 'ss']，必须是这些其中的，区分大小写 |\n| units     | String[] | [':', ':', ':', ''] | 要给每个时间层级后面添加的字符 |\n| theme     | combine/separate/text | combine | 要展示的样式，`combine` :每个层级的数字合并显示，`separate` :每个层级的数字单独显示，`text` :当做纯文本格式显示 |\n| color     | String | -- | 数字的颜色 |\n| bgColor   | String | -- | 卡片的背景色和分隔符的颜色，一般分隔符和卡片背景是一个颜色，如需设置不同颜色请自行用样式覆盖 |\n\n### 事件\n| 事件名 | 说明 | 类型 |\n| -- | -- | -- |\n| over | 倒计时时间走完时触发 | Function |\n\n### 示例\n| 代码 | 效果 |\n| -- | -- |\n| ```\u003cTurnClock /\u003e``` | ![screenshot1](./example/01.gif) |\n| ```\u003cTurnClock theme=\"separate\" /\u003e``` | ![screenshot2](./example/02.gif) |\n| ```\u003cTurnClock endTime=\"2023-06-20\" theme=\"combine\" bgColor=\"rgb(35, 45, 55)\" /\u003e``` | ![screenshot3](./example/03.gif) |\n| ```\u003cTurnClock :endTime=\"new Date('2023-06-20 12:00:00')\" bgColor=\"rgb(35, 45, 55)\" theme=\"separate\" /\u003e``` | ![screenshot4](./example/04.gif) |\n| ```\u003cTurnClock theme='text' /\u003e``` | ![screenshot5](./example/05.gif) |\n| ```\u003cTurnClock theme='text' formatter=\"YYYY年MM月DD日 HH点mm分ss秒\" /\u003e``` | ![screenshot6](./example/06.gif) |\n| ```\u003cTurnClock theme=\"text\" :units=\"['天', '时', '分', '秒']\" endTime=\"2023-06-18 12:00:00\" /\u003e``` | ![screenshot7](./example/07.gif) |\n\n* 有什么问题欢迎随时提Issues！😊\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flimintao%2Fvue-turn-clock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flimintao%2Fvue-turn-clock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flimintao%2Fvue-turn-clock/lists"}