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