https://github.com/jounqin/vue-async-modal
Flexible modal component for Vue with ability of asynchronous lazy loading
https://github.com/jounqin/vue-async-modal
async-modal lazy-loading modal vue-component vue-modal
Last synced: about 1 month ago
JSON representation
Flexible modal component for Vue with ability of asynchronous lazy loading
- Host: GitHub
- URL: https://github.com/jounqin/vue-async-modal
- Owner: JounQin
- License: mit
- Created: 2017-06-10T11:31:16.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-11-01T01:13:49.000Z (over 4 years ago)
- Last Synced: 2025-04-15T09:11:58.882Z (about 1 month ago)
- Topics: async-modal, lazy-loading, modal, vue-component, vue-modal
- Language: Vue
- Homepage: https://vue-async-modal.now.sh
- Size: 2.01 MB
- Stars: 39
- Watchers: 2
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vue-async-modal
[](https://github.com/JounQin/vue-async-modal/actions?query=workflow%3A%22Node+CI%22)
[](https://www.codacy.com/gh/JounQin/vue-async-modal)
[](https://www.npmjs.com/package/vue-async-modal)
[](https://github.com/JounQin/vue-async-modal/releases)
[](https://david-dm.org/JounQin/vue-async-modal?type=peer)
[](https://david-dm.org/JounQin/vue-async-modal)
[](https://david-dm.org/JounQin/vue-async-modal?type=dev)
[](https://conventionalcommits.org)
[](https://renovatebot.com)
[](https://standardjs.com)
[](https://github.com/prettier/prettier)
[](https://codechecks.io)
Flexible modal component for Vue with ability of asynchronous lazy loading
# Usage
Firstly, you should add `Modal` component in your template.
```vue
import { Modal } from 'vue-async-modal'
export default {
components: {
Modal,
},
}
```
Then, you will be able to get the modal instance via `this.$modal` in every Vue component.
We provide a basic modal component `ModalItem`.
If you want to open modal `MyModal` in component `Demo`:
```vue
// Demo.vue
export default {
methods: {
loadMyModal() {
this.$modal.open({
id: 'my-modal',
component: import('./MyModal.vue'),
options: {
destroy: true,
},
props: {
whatever,
},
})
},
},
}
// MyModal.vue
×
I'm Modal Title
I'm content of Modal Body
Let's rewrite default .modal-body
取消
确定
import { ModalItem } from 'vue-async-modal'
export default {
components: {
ModalItem,
},
}
```
## API
There are several useful methods on modal instance:
1. open a modal instance
```js
this.$modal.open({id, component, options, props}): Promise
```
`id` is optional, if no `id` passed in, it will generate a id by timestamp.
`component` could be a normal Vue component or a promise which will resolve a Vue component,
so that we could use code spit and dynamic loading here.
`options: {show, backdrop, destroy}`:
`show` and `backdrop` will true if you don't set it.
If `show` is true, when you open modal, it will show automatically, or it will just add into DOM without displaying.
If `backdrop` is true, modal will open with a transparent black backdrop, unless `backdrop` is `static`,
when user click modal outside, modal will auto trigger `close` event.
If `destroy` is true, the modal instance will destroy automatically on closing.
2. close or destroy a modal instance
```js
this.$modal.close(id, destroy): Promise
```
If `id` is falsy, it will be automatically choose current modal instance id.
if `destroy` is true, the modal instance will be destroyed even if it's `options.destroy` is false.
## Changelog
Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).
## License
[MIT][] © [JounQin][]@[1stG.me][]
[1stg.me]: https://www.1stg.me
[jounqin]: https://GitHub.com/JounQin
[mit]: http://opensource.org/licenses/MIT