{"id":16773190,"url":"https://github.com/javaluo/vue-flip-down","last_synced_at":"2026-02-18T21:31:24.346Z","repository":{"id":33183330,"uuid":"154082706","full_name":"javaLuo/vue-flip-down","owner":"javaLuo","description":"vue 翻页倒计时组件 妙啊","archived":false,"fork":false,"pushed_at":"2022-06-02T06:07:16.000Z","size":513,"stargazers_count":112,"open_issues_count":1,"forks_count":39,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-27T16:47:32.556Z","etag":null,"topics":["clock","countdown","countdown-timer","flip","vue"],"latest_commit_sha":null,"homepage":"https://isluo.com/work/vue-flip-down/","language":"Vue","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/javaLuo.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":"2018-10-22T03:28:17.000Z","updated_at":"2024-12-04T12:43:10.000Z","dependencies_parsed_at":"2022-07-13T00:10:33.279Z","dependency_job_id":null,"html_url":"https://github.com/javaLuo/vue-flip-down","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/javaLuo%2Fvue-flip-down","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-flip-down/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-flip-down/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-flip-down/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javaLuo","download_url":"https://codeload.github.com/javaLuo/vue-flip-down/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243841125,"owners_count":20356440,"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","countdown-timer","flip","vue"],"created_at":"2024-10-13T06:44:57.259Z","updated_at":"2025-03-17T02:31:32.329Z","avatar_url":"https://github.com/javaLuo.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-flip-down  [![npm](https://img.shields.io/npm/v/vue-flip-down.svg)](https://www.npmjs.com/package/vue-flip-down) [![npm](https://img.shields.io/npm/dt/vue-flip-down.svg)](https://www.npmjs.com/package/vue-flip-down)\n\n\n\n这是一个简单的翻页倒计时vue组件，项目中有用到，所以提取了一下。\u003cbr/\u003e\n你们也可以直接把`src/app.vue`文件拷贝到项目里直接用，就是个普通vue组件，就不用`npm install` 了\n\n# 注意：vue2.x 和 vue3.x\n**vue-flip-down 1.x的版本仅适用于vue2.x**\u003cbr/\u003e\n**vue-flip-down 3.x的版本仅适用于vue3.x**\n\n### 示例\n![img](public/demo.gif)\n\n### 在线DEMO\n\u003ca href=\"https://isluo.com/work/vue-flip-down/\" target=\"_blank\"\u003ehttps://isluo.com/work/vue-flip-down/\u003c/a\u003e\n\n\n### 安装\n```\nnpm install vue-flip-down --save\n```\n\n### 使用\n```vue\nimport FlipDown from 'vue-flip-down';\n\n\u003cFlipDown\n  :endDate=\"1540212399971\"  // 倒计时截止的日期\n  @timeUp=\"func\"            // 时间到了会触发timeUp事件\n/\u003e\n```\n\n### 参数\n\n| 名称    | 类型        | 默认 | 描述                                                                                  |\n| ------- | ----------- | ---- | ------------------------------------------------------------------------------------- |\n| endDate | Date/Number | 0    | 结束的时间，即倒计时会从当前时间一直到endDate停止，可以是一个日期对象，也可以是毫秒数 |\n| type    | Number      | 4    | 要怎么显示倒计时：4-日时分秒，3-时分秒，2-分秒，1-秒                                  |\n|theme|Number|1|样式：1-合并，2-分离。见下图|\n|timeUnit|Array|\\[\\]|时间单位，显示在空隙之间的文字，比如：\\['天','时','分','秒'\\] 或 \\[':',':',':'\\]|\n\n#### :theme=\"1\" 合并式\n![img](public/1.gif)\n\n\u003e 合并式的，每个不同的时间单位是合在一起的\n\n#### :theme=\"2\" 分离式\n![img](public/2.gif)\n\n\u003e 分离式的，每个数字都是单独分开的\n\n### 事件\n| 名称   | 返回值 | 描述                                    |\n| ------ | ------ | --------------------------------------- |\n| timeUp | null   | 当倒计时走到0时会触发一次，表示时间到了 |\n\n\n### 说明\n\n* 内部使用了setTimeout，当倒计时结束后，就会停止循环。但可以动态改变日期，倒计时又会被激活。\n* 基于本地时间做对比\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaluo%2Fvue-flip-down","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavaluo%2Fvue-flip-down","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaluo%2Fvue-flip-down/lists"}