在使用 el-drawer 组件时，点击空白区域（即抽屉外部的遮罩层）导致抽屉关闭的行为是由组件内部处理的。然而，默认情况下，这种关闭并不会自动触发 v-model 的更新，因为 v-model 是用于父组件和子组件之间的双向数据绑定。
为了确保当用户点击遮罩层时，props.visible 的值能够正确地变为 false，你需要做以下调整：
- 监听
update:visible事件：Element Plus 的el-drawer组件在关闭时会发出一个update:visible事件。你可以监听这个事件，并相应地更新父组件的状态。 - 添加
@close事件处理器：el-drawer提供了一个close事件，当抽屉关闭时（无论是通过点击遮罩、按下 Esc 键还是其他方式），都会触发该事件。你可以在子组件中监听这个事件，并调用emit来通知父组件更新visible状态。
下面是修改后的代码示例：
Drawer.vue
<template>
<el-drawer
v-model="localVisible"
:direction="direction"
@close="handleClose"
>
<template #header>
<h4>set title by slot</h4>
</template>
<template #default>
<!-- 内容 -->
</template>
<template #footer>
<!-- 底部内容 -->
</template>
</el-drawer>
</template>
<script lang="ts" setup>
import { ref, watch, defineProps, defineEmits, computed } from 'vue';
import type { DrawerProps } from 'element-plus';
// 定义 props 和 emit
const props = defineProps<{
visible: boolean;
}>();
const emit = defineEmits(['update:visible']);
// 创建一个计算属性来同步父组件的 visible 状态
const localVisible = computed({
get: () => props.visible,
set: (value) => emit('update:visible', value)
});
const direction = ref<DrawerProps['direction']>('rtl');
// 监听 close 事件
function handleClose() {
emit('update:visible', false);
}
</script>
父组件
确保你在父组件中正确地绑定了 v-model，以便它可以响应子组件发出的 update:visible 事件。
<template>
<!-- 其他内容 -->
<Drawer v-model:visible="drawerVisible"></Drawer>
<!-- 其他内容 -->
</template>
<script setup>
import { ref } from 'vue';
// ... 导入其他组件 ...
const drawerVisible = ref(false);
function toggleDrawer() {
drawerVisible.value = !drawerVisible.value;
}
</script>
在这个例子中，Drawer 组件内部不仅监听了 visible 属性的变化，还添加了对 close 事件的处理。当抽屉关闭时（例如点击遮罩层或按 Esc 键），handleClose 方法会被调用，并且通过 emit('update:visible', false) 来通知父组件更新其状态。这样，无论通过何种方式关闭抽屉，父组件中的 drawerVisible 都会被正确设置为 false。
