{"id":13535793,"url":"https://github.com/chenjiahan/vodal","last_synced_at":"2025-04-12T15:36:23.345Z","repository":{"id":16463451,"uuid":"79110868","full_name":"chenjiahan/vodal","owner":"chenjiahan","description":"A Vue modal with animations.","archived":false,"fork":false,"pushed_at":"2024-03-28T17:38:03.000Z","size":1709,"stargazers_count":380,"open_issues_count":8,"forks_count":58,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-10-29T20:00:59.730Z","etag":null,"topics":["animation","dialog","modal","vue"],"latest_commit_sha":null,"homepage":"https://chenjiahan.github.io/vodal/","language":"CSS","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/chenjiahan.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-01-16T11:11:49.000Z","updated_at":"2024-10-11T09:18:11.000Z","dependencies_parsed_at":"2023-01-13T20:30:39.353Z","dependency_job_id":"97adf559-9848-49ee-a499-356262a13dd1","html_url":"https://github.com/chenjiahan/vodal","commit_stats":{"total_commits":67,"total_committers":7,"mean_commits":9.571428571428571,"dds":0.4626865671641791,"last_synced_commit":"3eea8a6537e9e5cc8184846e10579291504a191b"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenjiahan%2Fvodal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenjiahan%2Fvodal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenjiahan%2Fvodal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenjiahan%2Fvodal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chenjiahan","download_url":"https://codeload.github.com/chenjiahan/vodal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248590319,"owners_count":21129785,"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":["animation","dialog","modal","vue"],"created_at":"2024-08-01T09:00:27.495Z","updated_at":"2025-04-12T15:36:23.313Z","avatar_url":"https://github.com/chenjiahan.png","language":"CSS","funding_links":[],"categories":["UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["覆盖","UI Components","Overlay"],"readme":"# Vodal [![Dependency Status](https://david-dm.org/chenjiahan/rodal.svg?style=flat-square)](https://david-dm.org/chenjiahan/vodal) [![NPM downloads](http://img.shields.io/npm/dm/rodal.svg?style=flat-square)](https://npmjs.org/package/vodal)\nA vue modal with animations.\n[Example](http://rodal.cn)\n\n## Installation    \n\n    npm i -S vodal\n    \n## Usage\n``` xml\n\u003cvodal :show=\"show\" animation=\"rotate\" @hide=\"show = false\"\u003e\n    \u003cdiv\u003eA vue modal with animations.\u003c/div\u003e\n\u003c/vodal\u003e\n```\n\n``` javascript\nimport Vue from 'vue';\nimport Vodal from 'vodal';\n\nVue.component(Vodal.name, Vodal);\n\nexport default {\n  name: 'app',\n    \n  data() {\n    return {\n      show: false\n    }\n  }\n}\n```\n\n``` sass\n// include animation styles\n@import \"vodal/common.css\";\n@import \"vodal/rotate.css\";\n```\n\n## Props\n\nProperty|Type|Default|Description\n---|---|---|---\nwidth|number|400|width of dialog\nheight|number|240|height of dialog\nmeasure|string|px|measure of width and height\nshow|bool|false|whether to show dialog\nmask|bool|true|whether to show mask\ncloseButton|bool|true|whether to show close button\ncloseOnEsc|bool|false|whether close dialog when esc pressed\ncloseOnClickMask|bool|true|whether close dialog when mask clicked\nanimation|string|zoom|animation type\nduration|number|300|animation duration\nclassName|string|/|className for the container\ncustomStyles|object|/|custom dialog styles\ncustomMaskStyles|object|/|custom mask styles\n\n## Event\nName|Description\n---|---\nhide|triggers when dialog will hide\nclickMask|triggers when mask clicked\n\n## Animation Types\n* zoom\n* fade\n* flip\n* door\n* rotate\n* slideUp\n* slideDown\n* slideLeft\n* slideRight\n\n## Other\n[React version](https://github.com/chenjiahan/rodal)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenjiahan%2Fvodal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchenjiahan%2Fvodal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenjiahan%2Fvodal/lists"}