p-modal v1.0.3

English | 简体中文

This is a tool used in Vue, designed to manage modal boxes in Vue in an imperative manner. It utilizes global reactive to provide the state of modal boxes, allowing you to easily show or hide modal boxes through the modal component.

Install

npm install p-modal

Usage

1. Embed ModalPlaceholder in the App.vue.

   <template>
     <ModalPlaceholder />
   </template>

!WARNING When using Vue versions below 3.3, importing Props Types provided by p-modal will cause errors. To resolve this, please upgrade to Vue 3.3 or above, or refer to the following link https://github.com/vuejs/core/issues/4294#issuecomment-1316097560

2. Create a modal component

   <script setup lang="ts">
   import { Button, Modal } from 'ant-design-vue'
   import { PModalProps } from 'p-modal'
   
   defineProps<PModalProps>()
   
   const confirm = () => {
     props.confirm()
     props.close()
   }
   
   const cancel = () => {
     props.cancel()
     props.close()
   }
   </script>
   
   <template>
     <Modal
       :open="show"
       @update:open="onChange"
       @ok="confirm"
       @cancel="cancel"
     >
       <p>Some contents...</p>
       <p>Some contents...</p>
       <p>Some contents...</p>
     </Modal>
   </template>

3. Use global API to open modal

   <script setup lang="ts">
   import { showModal } from 'p-modal'
   import MyModal from './MyModal.vue'
   
   const handleOpen = () => {
     showModal(MyModal)
   }
   </script>
   
   <template>
     <button @click="handleOpen">
       Open Modal
     </button>
   </template>

Thanks

Thanks to nice-modal-react for providing a good idea.

License

MIT License © 2024 Brain777777