{"id":13677833,"url":"https://github.com/JefferyHus/v-odometer","last_synced_at":"2025-04-29T12:31:54.324Z","repository":{"id":26882104,"uuid":"111607516","full_name":"JefferyHus/v-odometer","owner":"JefferyHus","description":"Odometer VueJS component","archived":false,"fork":false,"pushed_at":"2024-06-11T08:50:22.000Z","size":2850,"stargazers_count":98,"open_issues_count":3,"forks_count":20,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-29T23:23:01.631Z","etag":null,"topics":["animations","odometer","transitions","vue-components","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/JefferyHus.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":"2017-11-21T22:16:45.000Z","updated_at":"2024-04-15T10:46:26.000Z","dependencies_parsed_at":"2024-04-27T05:32:13.190Z","dependency_job_id":"0ed41e0f-99f5-4127-9f7b-e05aa621eec8","html_url":"https://github.com/JefferyHus/v-odometer","commit_stats":{"total_commits":62,"total_committers":5,"mean_commits":12.4,"dds":0.467741935483871,"last_synced_commit":"4ac661a5b94de8a7ac2e82a16c2383f26ad405af"},"previous_names":["jefferyhus/vue-odometer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JefferyHus%2Fv-odometer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JefferyHus%2Fv-odometer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JefferyHus%2Fv-odometer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JefferyHus%2Fv-odometer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JefferyHus","download_url":"https://codeload.github.com/JefferyHus/v-odometer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224173156,"owners_count":17268057,"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":["animations","odometer","transitions","vue-components","vuejs","vuejs2"],"created_at":"2024-08-02T13:00:47.705Z","updated_at":"2024-11-11T20:30:22.408Z","avatar_url":"https://github.com/JefferyHus.png","language":"JavaScript","funding_links":[],"categories":["UI实用程序","Components \u0026 Libraries","UI Utilities","UI Utilities [🔝](#readme)","Uncategorized"],"sub_categories":["动画","UI Utilities","Animation","Uncategorized"],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"http://github.hubspot.com/odometer/\" target=\"_blank\"\u003e\u003cimg src=\"http://themesawesome.com/wp-content/uploads/2014/05/odometer.png\" width=\"523\" height=\"167\" /\u003e\u003c/a\u003e\u003cbr\u003e\u003cbr\u003e\n\u003ca href=\"http://github.hubspot.com/odometer/\" target=\"_blank\"\u003eOdometer\u003c/a\u003e\n\u003cbr\u003e\u003cbr\u003e\n\u003c/p\u003e\n\n# About Vue-Odometer\nSmoothly transitions numbers with ease. Use this library to give you application a smooth animation, only applicable on numbers, for more details about the OdometerJS pelase refer to: https://github.com/HubSpot/odometer\n\n## Installation\n```console\nnpm install v-odometer\n```\n\n## NOTE\nIf you are getting the error of \"Unknown Odometer keyword\", this means that you are missing odometer library in your application, simply because the Odometer library is not yet exported as an AMD module and still only a commenJS file (refer to: [AMD exporting issues](https://github.com/HubSpot/odometer/pull/102)).\nHowever if you are not building your applciation in a webpack envirment or similar, and you include VueJS file from a public cdn, then you are fine to include the `./v-odometer/dist/main.prod.js`, the Vue will be public in your window there for this component will be automatically integrated as a global component and you can simply use it directly insidde your html file:\n\n```html\n\t...\n\t\u003cvue-odometer :value=\"myValue\"\u003e\u003c/vue-odometer\u003e\n\t...\n```\n\n## Usage\n#### ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015)\nTo cherry pick the component, start by importing it in the file where it is being used:\n```javascript\nimport VueOdometer from 'v-odometer/src'\n```\nThen add it to your component definition:\n\n```javascript\nVue.component('my-component', {\n    components: {\n        'vue-odometer': VueOdometer\n    }\n    // ...\n})\n```\nOr register it globally:\n\n```javascript\nVue.component('vue-odometer', VueOdometer);\n```\n#### ECMAScript 5 (ES5)\n```xml\n...\n\u003chead\u003e\n\t\u003c!-- Metas --\u003e\n\t\u003cmeta name=\"title\" content=\"v-odometer\"\u003e\n\t\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n\t\u003cmeta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"\u003e\n\t\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\u003e\n\t\u003cmeta name=\"description\" content=\"\"\u003e\n\t\u003cmeta name=\"keywords\" content=\"\"\u003e\n\t\u003ctitle\u003eOdometer - VueJS component\u003c/title\u003e\n\t\u003c!-- include this style file, it contains all the themes provided from odometer --\u003e\n\t\u003clink rel=\"stylesheet\" href=\"./your/path/to/main.css\"\u003e\n\t\u003c!-- don't forget to include the odometer library --\u003e\n\t\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/odometer.js\"\u003e\u003c/script\u003e\n\t\u003c!-- then load this component --\u003e\n\t\u003cscript type=\"text/javascript\" src=\"./your/path/to/main.prod.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\t\u003cdiv id=\"app\"\u003e\n\t\t...\n\t\t\u003cvue-odometer :value=\"mynumber\" class=\"myClassName\"\u003e\u003c/vue-odometer\u003e\n\t\t...\n\t\u003c/div\u003e\n\u003c/body\u003e\n...\n```\n\n```javascript\nvar app = new Vue({\n\tdata: {\n\t\tmynumber: \"\"\n\t}\n})\n```\n**Properties:**\n```typescript\nvalue: { type: Number, default: () =\u003e 0 },\ntheme: { type: String, default: () =\u003e 'minimal' },\nformat: { type: String, default: () =\u003e '(.ddd),dd' },\nduration: { type: Number, default: () =\u003e 3000 },    \nclassName: { type: String, default: () =\u003e 'odometer' },    \nanimation: { type: String, default: () =\u003e 'count' },    \nformatFunction: { type: Function },\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJefferyHus%2Fv-odometer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJefferyHus%2Fv-odometer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJefferyHus%2Fv-odometer/lists"}