Vue3点击按钮展开表单且点击阴影部分和关闭按钮关闭
一、案例
<template>
<div>
<button @click="toggleForm">打开表单</button>
<div class="overlay" v-if="showForm" @click="closeForm">
<div class="form-container" @click.stop>
<form-popup @close="closeForm" />
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
import FormPopup from './FormPopup.vue'; // 假设表单组件在 ./FormPopup.vue 中
export default {
components: {
FormPopup
},
setup() {
const showForm = ref(false);
const toggleForm = () => {
showForm.value = !showForm.value;
};
const closeForm = () => {
showForm.value = false;
};
return {
showForm,
toggleForm,
closeForm
};
}
};
</script>
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.form-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
在这个代码中,我们在 .form-container
上添加了 @click.stop
事件修饰符,这样点击表单内容时就不会触发父元素的点击事件,只有点击遮罩层时才会触发关闭表单的事件。