{"id":15503594,"url":"https://github.com/jounqin/vue-async-modal","last_synced_at":"2025-04-15T09:12:22.509Z","repository":{"id":21754868,"uuid":"93935077","full_name":"JounQin/vue-async-modal","owner":"JounQin","description":"Flexible modal component for Vue with ability of asynchronous lazy loading","archived":false,"fork":false,"pushed_at":"2020-11-01T01:13:49.000Z","size":2110,"stargazers_count":39,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T09:11:58.882Z","etag":null,"topics":["async-modal","lazy-loading","modal","vue-component","vue-modal"],"latest_commit_sha":null,"homepage":"https://vue-async-modal.now.sh","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/JounQin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["JounQin"],"open_collective":"rxts"}},"created_at":"2017-06-10T11:31:16.000Z","updated_at":"2024-02-27T05:51:01.000Z","dependencies_parsed_at":"2022-08-09T03:30:21.303Z","dependency_job_id":null,"html_url":"https://github.com/JounQin/vue-async-modal","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JounQin%2Fvue-async-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JounQin%2Fvue-async-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JounQin%2Fvue-async-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JounQin%2Fvue-async-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JounQin","download_url":"https://codeload.github.com/JounQin/vue-async-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249040131,"owners_count":21202823,"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":["async-modal","lazy-loading","modal","vue-component","vue-modal"],"created_at":"2024-10-02T09:14:06.900Z","updated_at":"2025-04-15T09:12:22.485Z","avatar_url":"https://github.com/JounQin.png","language":"Vue","funding_links":["https://github.com/sponsors/JounQin","https://opencollective.com/rxts"],"categories":[],"sub_categories":[],"readme":"# vue-async-modal\n\n[![GitHub Actions](https://github.com/JounQin/vue-async-modal/workflows/Node%20CI/badge.svg)](https://github.com/JounQin/vue-async-modal/actions?query=workflow%3A%22Node+CI%22)\n[![Codacy Grade](https://img.shields.io/codacy/grade/fda7b1ab36004763a25c32990deea882)](https://www.codacy.com/gh/JounQin/vue-async-modal)\n[![npm](https://img.shields.io/npm/v/vue-async-modal.svg)](https://www.npmjs.com/package/vue-async-modal)\n[![GitHub Release](https://img.shields.io/github/release/JounQin/vue-async-modal)](https://github.com/JounQin/vue-async-modal/releases)\n\n[![David Peer](https://img.shields.io/david/peer/JounQin/vue-async-modal.svg)](https://david-dm.org/JounQin/vue-async-modal?type=peer)\n[![David](https://img.shields.io/david/JounQin/vue-async-modal.svg)](https://david-dm.org/JounQin/vue-async-modal)\n[![David Dev](https://img.shields.io/david/dev/JounQin/vue-async-modal.svg)](https://david-dm.org/JounQin/vue-async-modal?type=dev)\n\n[![Conventional Commits](https://img.shields.io/badge/conventional%20commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![codechecks.io](https://raw.githubusercontent.com/codechecks/docs/master/images/badges/badge-default.svg?sanitize=true)](https://codechecks.io)\n\nFlexible modal component for Vue with ability of asynchronous lazy loading\n\n# Usage\n\nFirstly, you should add `Modal` component in your template.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cmodal /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport { Modal } from 'vue-async-modal'\n\nexport default {\n  components: {\n    Modal,\n  },\n}\n\u003c/script\u003e\n```\n\nThen, you will be able to get the modal instance via `this.$modal` in every Vue component.\n\nWe provide a basic modal component `ModalItem`.\n\nIf you want to open modal `MyModal` in component `Demo`:\n\n```vue\n// Demo.vue\n\u003ctemplate\u003e\n  \u003cbutton @click=\"loadMyModal\"\u003e\u003c/button\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  methods: {\n    loadMyModal() {\n      this.$modal.open({\n        id: 'my-modal',\n        component: import('./MyModal.vue'),\n        options: {\n          destroy: true,\n        },\n        props: {\n          whatever,\n        },\n      })\n    },\n  },\n}\n\u003c/script\u003e\n\n// MyModal.vue\n\u003ctemplate\u003e\n  \u003c!-- the simplest way to use default header template an override modal-title is use prop header --\u003e\n  \u003c!-- if you want to use default footer template, just add prop `footer: true` --\u003e\n  \u003c!-- every ModalItem instance will show/disppear with a fade transition by default --\u003e\n  \u003c!-- you can define prop transition to use your own transition, or just pass empty string `transition` prop to disable it --\u003e\n  \u003cmodal-item :header=\"Modal Header\" :footer=\"true\"\u003e\n    \u003c!-- slot header will be content of .modal-header --\u003e\n    \u003ctemplate slot=\"header\"\u003e\n      \u003cbutton\u003e×\u003c/button\u003e\n      \u003ch4\u003e\n        \u003cdiv class=\"modal-title\"\u003eI'm Modal Title\u003c/div\u003e\n      \u003c/h4\u003e\n    \u003c/template\u003e\n\n    \u003c!-- default slot will be used as content in .modal-body --\u003e\n    I'm content of Modal Body\n\n    \u003c!-- or you can use slot body to rewrite whole .modal-body --\u003e\n    \u003cdiv class=\"modal-body\" slot=\"body\"\u003e\n      Let's rewrite default .modal-body\n    \u003c/div\u003e\n\n    \u003c!-- you can overwrite footer content by slot footer --\u003e\n    \u003ctemplate slot=\"footer\"\u003e\n      \u003c!-- cancle/confirm text can be rewrote by prop `cancleText` and `confirmText` --\u003e\n      \u003cbutton class=\"btn btn-default\"\u003e取消\u003c/button\u003e\n      \u003c!-- if you are using `footer: true`, it will trigger `confirm` event on clicking confirm btn--\u003e\n      \u003c!-- or you can use prop `disbaled: true` to disbale it --\u003e\n      \u003cbutton class=\"btn btn-primary\"\u003e确定\u003c/button\u003e\n    \u003c/template\u003e\n  \u003c/modal-item\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport { ModalItem } from 'vue-async-modal'\n\nexport default {\n  components: {\n    ModalItem,\n  },\n}\n\u003c/script\u003e\n```\n\n## API\n\nThere are several useful methods on modal instance:\n\n1. open a modal instance\n\n```js\nthis.$modal.open({id, component, options, props}): Promise\n```\n\n`id` is optional, if no `id` passed in, it will generate a id by timestamp.\n\n`component` could be a normal Vue component or a promise which will resolve a Vue component,\nso that we could use code spit and dynamic loading here.\n\n`options: {show, backdrop, destroy}`:\n\n`show` and `backdrop` will true if you don't set it.\n\nIf `show` is true, when you open modal, it will show automatically, or it will just add into DOM without displaying.\n\nIf `backdrop` is true, modal will open with a transparent black backdrop, unless `backdrop` is `static`,\nwhen user click modal outside, modal will auto trigger `close` event.\n\nIf `destroy` is true, the modal instance will destroy automatically on closing.\n\n2. close or destroy a modal instance\n\n```js\nthis.$modal.close(id, destroy): Promise\n```\n\nIf `id` is falsy, it will be automatically choose current modal instance id.\n\nif `destroy` is true, the modal instance will be destroyed even if it's `options.destroy` is false.\n\n## Changelog\n\nDetailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).\n\n## License\n\n[MIT][] © [JounQin][]@[1stG.me][]\n\n[1stg.me]: https://www.1stg.me\n[jounqin]: https://GitHub.com/JounQin\n[mit]: http://opensource.org/licenses/MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjounqin%2Fvue-async-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjounqin%2Fvue-async-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjounqin%2Fvue-async-modal/lists"}