@usemodals/vue3
v1.1.0
Published
![](https://i.328888.xyz/2023/05/08/i1dV1H.png)
Downloads
10
Maintainers
Readme
@usemodals/vue3
an eaist way to open/close modals and pass props to modals, or register an dynmaic modal and you can use these modals globally, for Vue 3.x
Install
npm install @usemodals/vue3
QuickStart
// main.ts
import Vue from 'vue'
import UseModals from '@usemodals/vue3'
import App from './app.vue'
const app = createApp(App)
// balabala
app.use(UseModals)
app.mount('#app')
Available Components and Functions
UseModal
, is a component that provides a scope slot namedmodalState
to access thevisible
andprops
information of the current modal, the component receives twoprops
, namelymodalId
AndisGlobal
,modalId
identifies the unique ID of the current modal,isGlobal
specifies whether this registration is a global registration, if you want to save the memory of the application, it is not recommended to set it totrue
<template>
<!-- Register the modal globally, it will still reside in memory no matter whether the current component is unmounted or not -->
<UseModal modalId="globalModalId" :isGlobal>
<template #modal="modalState">
<ThirdPartyModal :visible="modalState.visible" :title="modalState.props.title">
{{ modalState.props }}
</ThirdPartyModal>
</template>
</UseModal>
<!-- Partially registers the modal, which will be unloaded from memory as the parent component unloads -->
<UseModal modalId="partModalId">
<template #modal="modalState">
<!-- balabala -->
</template>
</UseModal>
</template>
useOpenModal
, it's return a method to open a registered modal, and receive 2 parameters, one is themodalId
when registering the modal, and the second is theprops
that needs to be passed to open a certain modal, The second parameter is optional
<template>
<Button @click="openModal('modalIdToBeOpen', { propsKey: 'string', propsKey2: 'string2' })">
open Modal
</Button>
</template>
<script setup lang="ts">
import { useOpenModal } from '@usemodals/vue3'
const openModal = useOpenModal()
</script>
useUpdateModal
, it's return a method to update the value ofprops
in a modal that has been opened, and receive 3 parameters, one is themodalId
when registering the modal, the second is the newprops
, The third is a boolean value, indicating whether to merge with the oldprops
or directly overwrite, where the third parameter is optional
<template>
<div>
<Button @click="() => openAndUpdate()">
open Modal and update
</Button>
<Button @click="openAndUpdate(true)">
open Modal and update(merge)
</Button>
</div>
</template>
<script setup lang="ts">
import { useOpenModal, useUpdateModal } from '@usemodals/vue3'
const openModal = useOpenModal()
const updateModal = useUpdateModal()
const openAndUpdate = (merge?: boolean) => {
openModal('modalIdToBeUpdate', { title: 'init modal title', content: 'init modal content' })
setTimeout(() => {
updateModal('modalIdToBeUpdate', { content: 'update modal content' }, merge)
}, 3000)
}
</script>
useCloseModal
, it's return a method to close a modal that has been opened, and receive 1 parameter, which is themodalId
when registering the modal
<template>
<Button @click="closeModal('modalIdToBeClose')">
close Modal
</Button>
</template>
<script setup lang="ts">
import { useCloseModal } from '@usemodals/vue3'
const closeModal = useCloseModal()
</script>
useCloseAllModals
, it's return a method to close all opened modals without any parameters
<template>
<Button @click="closeAllModals">
close all Modals
</Button>
</template>
<script setup lang="ts">
import { useCloseAllModals } from '@usemodals/vue3'
const closeAllModals = useCloseAllModals()
</script>
useModalProps
, it's return a method to get the props of modal, and receive 1 parameter, which is themodalId
when registering the modal
<template>
<Button @click="printProps('modalIdToBeClose')">
close Modal
</Button>
</template>
<script setup lang="ts">
import { useModalProps } from '@usemodals/vue3'
const getModalProps = useModalProps()
const printProps = () => {
console.log(getModalProps('modalId'))
}
</script>
Motivation
- reduce unnecessary business code
- easier to controll modal display/hidden or update modals' props
- common modal props
For detail demo, check here