{"id":17784907,"url":"https://github.com/realgeoffrey/vue-timer-countdown","last_synced_at":"2025-03-16T04:30:48.882Z","repository":{"id":123046465,"uuid":"217496139","full_name":"realgeoffrey/vue-timer-countdown","owner":"realgeoffrey","description":"倒计时（Vue@2组件）","archived":false,"fork":false,"pushed_at":"2023-03-29T04:19:22.000Z","size":30,"stargazers_count":17,"open_issues_count":0,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-30T00:20:51.402Z","etag":null,"topics":["countdown-timer","countdowntimer","vue"],"latest_commit_sha":null,"homepage":"https://realgeoffrey.github.io/vue-timer-countdown/demo/index.html","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/realgeoffrey.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":"2019-10-25T09:10:04.000Z","updated_at":"2023-08-31T02:41:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"14c223d8-49cf-4990-9b46-a23790e2ac3a","html_url":"https://github.com/realgeoffrey/vue-timer-countdown","commit_stats":{"total_commits":26,"total_committers":4,"mean_commits":6.5,"dds":"0.42307692307692313","last_synced_commit":"105287d2cf2546ba45f78de9f2ea53ae5ffd8e6f"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realgeoffrey%2Fvue-timer-countdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realgeoffrey%2Fvue-timer-countdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realgeoffrey%2Fvue-timer-countdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realgeoffrey%2Fvue-timer-countdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/realgeoffrey","download_url":"https://codeload.github.com/realgeoffrey/vue-timer-countdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243802944,"owners_count":20350316,"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":["countdown-timer","countdowntimer","vue"],"created_at":"2024-10-27T08:22:11.425Z","updated_at":"2025-03-16T04:30:48.876Z","avatar_url":"https://github.com/realgeoffrey.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-timer-countdown\n\nVue@2的倒计时组件\n\n1. npm：\u003chttps://www.npmjs.com/package/vue-timer-countdown\u003e\n2. demo：\u003chttps://realgeoffrey.github.io/vue-timer-countdown/demo/index.html\u003e\n\n### 安装\n1. Node.js安装\n\n    ```bash\n    npm install vue-timer-countdown --save\n    ```\n2. 浏览器引用\n\n    ```html\n    \u003c!-- 需要先引入vue：\u003cscript src=\"//unpkg.com/vue@2\"\u003e\u003c/script\u003e --\u003e\n    \u003cscript src=\"//unpkg.com/vue-timer-countdown\"\u003e\u003c/script\u003e\n    ```\n\n### 注册组件\n1. Node.js注册\n\n    1. 全局注册\n\n        ```javascript\n        import Vue from 'vue'\n        import vueTimerCountdown from 'vue-timer-countdown'\n\n        // 全局注册\n        Vue.use(vueTimerCountdown, { component: 'TimerCountdown' }) // 组件名默认是：timer-countdown\n        // 或：Vue.component('TimerCountdown', vueTimerCountdown)\n        ```\n    2. 局部注册\n\n        ```javascript\n        import vueTimerCountdown from 'vue-timer-countdown'\n\n        export default {\n          components: {\n            // 局部注册\n            TimerCountdown: vueTimerCountdown\n          }\n        }\n        ```\n2. 浏览器注册\n\n    1. 全局注册\n\n        ```html\n        \u003c!-- 需要先引入vue：\u003cscript src=\"//unpkg.com/vue@2\"\u003e\u003c/script\u003e --\u003e\n        \u003c!-- 需要先引入vue-timer-countdown：\u003cscript src=\"//unpkg.com/vue-timer-countdown\"\u003e\u003c/script\u003e --\u003e\n\n        \u003cscript\u003e\n        // 全局注册\n        Vue.use(vueTimerCountdown, { component: 'timer-countdown' }) // 组件名默认是：timer-countdown\n        // 或：Vue.component('timer-countdown', vueTimerCountdown)\n        \u003c/script\u003e\n        ```\n    2. 局部注册\n\n        ```html\n        \u003c!-- 需要先引入vue：\u003cscript src=\"//unpkg.com/vue@2\"\u003e\u003c/script\u003e --\u003e\n        \u003c!-- 需要先引入vue-timer-countdown：\u003cscript src=\"//unpkg.com/vue-timer-countdown\"\u003e\u003c/script\u003e --\u003e\n\n        \u003cscript\u003e\n        new Vue({\n          components: {\n            // 局部注册\n            'timer-countdown': vueTimerCountdown\n          }\n        })\n        \u003c/script\u003e\n        ```\n\n### 用法\n1. 参数\n\n    ```vue\n    \u003cTimerCountdown\n      :deadline=\"倒计时剩余时间-秒（必填）\"\n      :complete-zero=\"补全0（true）\"\n      :left-second=\"提前到期-秒（0）\"\n      :ignore-day=\"true：展示到小时；false：展示到天（true）\"\n      @done=\"倒计时结束后回调的方法\"\n      @update=\"每秒渲染结束后回调的方法，带参数{ day, hour, minute, second, restSecond }（展示的天、小时、分钟、秒，总共剩余的秒）\"\n    /\u003e\n    ```\n\n    \u003e任何时候（包括已经结束后触发`done`之后），修改`deadline`都可以让组件重新启动。\n2. 插槽\n\n    ```vue\n    \u003cTimerCountdown\n      :deadline=\"倒计时剩余时间-秒（必填）\"\n      v-slot=\"time\"\n    \u003e\n      {{ time.day }}天\n      {{ time.hour }}时\n      {{ time.minute }}分\n      {{ time.second }}秒\n    \u003c/TimerCountdown\u003e\n    ```\n\n### Tips\n因为传递的`deadline`是剩余秒数，而不是时间戳，所以如果想要重启同一个秒数的倒计时，需要想办法触发，比如先设置`deadline`为其他值然后再设置回去。（如果改为时间戳实现就可以规避前面说的问题，但是使用者就要每次传入`倒计时秒数 + Date.now()`）\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frealgeoffrey%2Fvue-timer-countdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frealgeoffrey%2Fvue-timer-countdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frealgeoffrey%2Fvue-timer-countdown/lists"}