element-plus/packages/hooks/use-modal/index.ts
三咲智子 b8c38a9fe5
chore: enhance eslint rules (#6476)
* chore: enhance eslint rules

* chore: enhance eslint rules
2022-03-08 14:03:32 +08:00

33 lines
800 B
TypeScript

import { watch } from 'vue'
import { isClient, useEventListener } from '@vueuse/core'
import { EVENT_CODE } from '@element-plus/constants'
import type { Ref } from 'vue'
type ModalInstance = {
handleClose: () => void
}
const modalStack: ModalInstance[] = []
const closeModal = (e: KeyboardEvent) => {
if (modalStack.length === 0) return
if (e.code === EVENT_CODE.esc) {
e.stopPropagation()
const topModal = modalStack[modalStack.length - 1]
topModal.handleClose()
}
}
export const useModal = (instance: ModalInstance, visibleRef: Ref<boolean>) => {
watch(visibleRef, (val) => {
if (val) {
modalStack.push(instance)
} else {
modalStack.splice(modalStack.indexOf(instance), 1)
}
})
}
if (isClient) useEventListener(document, 'keydown', closeModal)