   {
const { msg } = toRefs(props)
return <>
Hello World
msg:{msg.value}
export {
VfModal,
Controller
}
`
2. import `VfModal` in `App.vue``
html`
3. Open a modal anywhere
`js
import { Controller } from './modal'
/**
* open a modal with key
* @param key {ModalKey}
* @param opt {
* props: {Record
* zIndex: {number} default is 1
* on: {EventMap} event listener
* }
* @return {
* renderList: RenderList
* isClosed: () => Promise
* close: () => void
* }
*/
Controller.open('net')
const { close, isClosed } = Controller.open('hello', {
props: {
msg: 'haha'
},
on: {
// like
xxx: (...args) => {
// do something
}
},
// maybe useful when stacking multiple modals
zIndex: 10
})
// `only` close the 'hello' modal`
close()
// only` await the 'hello' modal closed
isClosed()
.then(() => {
// do something
})
/**
* close a modal
* @param key key of modal that you would close , if not provided, will close modal directly
*/
Controller.close()
Controller.close('hello')
/**
* returns a promise that will be resolved when the `VFModal` component is invisible`
* that means it will be resolved on the onAfterEnter` hook is triggered.`
*/
Controller.isClosed()
.then(() => {
// do something
})
- `modals`: The map object of modal.`
- type`: `
ts`
interface ModalObj {
component: any
zIndex?: number
props?: Record
on?: EventMap
}
- `component`: vue componet`
- zIndex`: style z-index, which can be overridden on open `
- props`: props of component, which can be overridden on open `
- on`: listener of component, which can be overridden on open `
ts`
type Handler
interface EventMap {
[ x: string ]: Handler
}
- `provide`: the function called in setup`
- mask`: mask of modal`
- clickHandler`: the function called when mask is clicked `
ts`
type clickHandler = (controller: Controller, emiiter: Emitter, instance: VfModal) => void
The `emitter` can also be obtained in modal through the injection`
- autoCloseModal`: if true modal will be closed when clicking mask, default is false`
- classname`: classname for mask, default is 'vf-modal-mask-wrapper'`
- transition`: Vue's transition for modal`
- name`: Vue's transition name, default is 'vf-modal-fade'`
- type`: Vue's transition name, default is 'transition'`
- on`: modal open/close hooks `
ts `
interface on {
modalOpen?: Function
modalClose?: Function
}
- `multipleModal`: control whether the same modal can open multiple`
- closeWhenRouteChanges`: close modal when route changed.`
- container`: the component that wrap the modal, it's classname is 'vf-modal-container-wrapper', default is 'div'
provide` property in createConfig, but vf-modal also provides an injection with the basic state of current context.
- `type`
`ts
interface VfModalInstanceState {
renderList: RenderList
close: (key?: string) => void
emitter: Emitter
}
`-
`renderList`: list of currently rendered modal
- `close`: same close method as provided by the `Controller`
- `emitter``: a emitter create by mitt