zuaa
/
vue-vben-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(modal): `maskClosable` and `Esc` take no effect 

修复BasicModal按Esc和点击遮罩无法关闭的问题

fixed: #1203
This commit is contained in:
无木 2021-09-15 10:56:14 +08:00
parent 6544f84bc2
commit 2346a90c08
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Modal/src/BasicModal.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Modal v-bind="getBindValue"> <Modal v-bind="getBindValue" @cancel="handleCancel">
<template #closeIcon v-if="!$slots.closeIcon"> <template #closeIcon v-if="!$slots.closeIcon">
<ModalClose <ModalClose
:canFullscreen="getProps.canFullscreen" :canFullscreen="getProps.canFullscreen"
@ -72,6 +72,7 @@
import { basicProps } from './props'; import { basicProps } from './props';
import { useFullScreen } from './hooks/useModalFullScreen'; import { useFullScreen } from './hooks/useModalFullScreen';
import { omit } from 'lodash-es'; import { omit } from 'lodash-es';
import { useDesign } from '/@/hooks/web/useDesign';
export default defineComponent({ export default defineComponent({
name: 'BasicModal', name: 'BasicModal',
@ -83,6 +84,7 @@
const visibleRef = ref(false); const visibleRef = ref(false);
const propsRef = ref<Partial<ModalProps> | null>(null); const propsRef = ref<Partial<ModalProps> | null>(null);
const modalWrapperRef = ref<any>(null); const modalWrapperRef = ref<any>(null);
const { prefixCls } = useDesign('basic-modal');
// modal Bottom and top height // modal Bottom and top height
const extHeightRef = ref(0); const extHeightRef = ref(0);
@ -175,7 +177,8 @@
// 取消事件 // 取消事件
async function handleCancel(e: Event) { async function handleCancel(e: Event) {
e?.stopPropagation(); e?.stopPropagation();
// 过滤自定义关闭按钮的空白区域
if ((e.target as HTMLElement)?.classList?.contains(prefixCls + '-close--custom')) return;
if (props.closeFunc && isFunction(props.closeFunc)) { if (props.closeFunc && isFunction(props.closeFunc)) {
const isClose: boolean = await props.closeFunc(); const isClose: boolean = await props.closeFunc();
visibleRef.value = !isClose; visibleRef.value = !isClose;