- Notifications
You must be signed in to change notification settings - Fork5
worldzhao/vue-nice-modal
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Vue version of@ebay/nice-modal-react.
vue-nice-modal is a utility library that converts Vue.js modal components into Promise-based APIs.
Supports Vue 2.x viavue-demi.
English |简体中文
An elegant Vue modal state management solution, supporting both Vue 2 and Vue 3.
- 🎯 Simple and intuitive API
- 🔄 Promise-based modal operations
- 🎨 Framework agnostic - works with any UI library
- ⚡️ Lightweight, zero dependencies
- 🔌 Supports both Vue 2 and Vue 3
- 📦 Full TypeScript support
# npmnpm install vue-nice-modal# pnpmpnpm add vue-nice-modal
<!-- App.vue --><template><NiceModalProvider><router-view/></NiceModalProvider></template><scriptsetup>import{ProviderasNiceModalProvider}from'vue-nice-modal';</script>
<!-- my-modal.vue --><template><van-dialogshow-cancel-button:value="modal.visible.value":close-on-click-overlay="false":title="title":message="content"@closed="modal.remove"@confirm="handleConfirm"@cancel="handleCancel"/></template><scriptsetup>import{useModal}from'vue-nice-modal';constmodal=useModal();defineProps(['title','content']);consthandleCancel=()=>{modal.reject('cancel');modal.hide();};consthandleConfirm=()=>{modal.resolve('confirm');modal.hide();};</script>
Can be used with any UI library, such as element-ui
<!-- my-modal.vue --><template><el-dialog:title="title":visible="modal.visible.value"append-to-body@closed="modal.remove"><span>{{ content }}</span><spanslot="footer"class="dialog-footer"><el-button@click="handleCancel">Cancel</el-button><el-buttontype="primary"@click="handleConfirm">Confirm</el-button></span></el-dialog></template>
Create modal higher-order component using NiceModal.create
// my-modal.jsimportNiceModalfrom'vue-nice-modal';import_MyModalfrom'./my-modal.vue';exportconstMyModal=NiceModal.create(_MyModal);
constshowModal=async()=>{try{constres=awaitNiceModal.show(MyModal,{title:'Title',content:'Content',});console.log('Result:',res);}catch(error){console.log('Cancelled:',error);}};
Can inherit context from declaration
<template><MyModalid="my-modal"/></template><scriptsetup>constshowModal=async()=>{try{constres=awaitNiceModal.show('my-modal',{title:'Title',content:'Content',});console.log('Result:',res);}catch(error){console.log('Cancelled:',error);}};</script>
constmodal=NiceModal.useModal(MyModal);constshowModal=async()=>{try{constres=awaitmodal.show({title:'Title',content:'Content',});console.log('Result:',res);}catch(error){console.log('Cancelled:',error);}};
// Pre-register modalNiceModal.register('register-modal',MyModal);constshowModal=async()=>{try{constres=awaitNiceModal.show('register-modal',{title:'Title',content:'Content',});console.log('Result:',res);}catch(error){console.log('Cancelled:',error);}};
Modal container component, needs to wrap the outermost layer of the application.
Higher-order component for creating modal components.
Show modal, supports passing parameters.
modalId: Modal ID or componentargs: Parameters passed to modal- Returns: Promise
Hide modal.
modalId: Modal ID or component- Returns: Promise
Remove modal from DOM.
modalId: Modal ID or component
Register modal component.
id: Modal IDcomponent: Modal componentprops: Default props
Unregister modal component.
id: Modal ID
Return values:
id: Modal IDargs: Modal parametersvisible: Visibility stateshow(args?): Show modalhide(): Hide modalremove(): Remove modalresolve(value): Resolve modal Promisereject(reason): Reject modal PromiseresolveHide(value): Resolve hide Promise
This package provides complete TypeScript type declarations, supporting type inference for props and parameters.
- Supports Tree Shaking
- Provides both ESM/CJS formats
dist/ ├── esm/# ES Module format └── lib/# CommonJS format
- iOS >= 9
- Android >= 4.4
- Latest two versions of modern browsers
MIT
About
Vue version of @ebay/nice-modal-react