Vue 中关闭当前弹窗页面
在打开弹窗的路由中添加一个 beforeRouteLeave 路由守卫,当离开该路由时关闭弹窗。以上两种方式都可以实现关闭当前弹窗页面的功能,具体使用哪种方式取决于项目需求和个人习惯。在弹窗组件中添加一个关闭按钮,并在点击事件中调用关闭弹窗的方法。在父组件中监听关闭事件,并将弹窗的显示状态设置为 false。在父组件中监听关闭事件,并在关闭事件中调用关闭弹窗的方法。1、使用关闭按钮触发关闭事件。2
·
在 Vue 中关闭当前弹窗页面可以通过以下两种方式实现:
1、使用关闭按钮触发关闭事件
在弹窗组件中添加一个关闭按钮,并在点击事件中调用关闭弹窗的方法。例如:
<template>
<div class="modal">
<div class="modal-content">
<span class="close" @click="closeModal">×</span>
<p>弹窗内容</p>
</div>
</div>
</template>
<script>
export default {
methods: {
closeModal() {
this.$emit('close');
}
}
}
</script>
在父组件中监听关闭事件,并将弹窗的显示状态设置为 false。例如:
<template>
<div>
<button @click="showModal = true">打开弹窗</button>
<modal v-if="showModal" @close="showModal = false"></modal>
</div>
</template>
<script>
import Modal from './Modal.vue';
export default {
components: {
Modal
},
data() {
return {
showModal: false
}
}
}
</script>
2、使用路由守卫关闭弹窗
在打开弹窗的路由中添加一个 beforeRouteLeave 路由守卫,当离开该路由时关闭弹窗。例如:
const router = new VueRouter({
routes: [
{
path: '/modal',
component: Modal,
beforeRouteLeave(to, from, next) {
this.$emit('close');
next();
}
}
]
});
在父组件中监听关闭事件,并在关闭事件中调用关闭弹窗的方法。例如:
<template>
<div>
<button @click="showModal = true">打开弹窗</button>
<modal v-if="showModal" @close="showModal = false"></modal>
</div>
</template>
<script>
import Modal from './Modal.vue';
export default {
components: {
Modal
},
data() {
return {
showModal: false
}
}
}
</script>
以上两种方式都可以实现关闭当前弹窗页面的功能,具体使用哪种方式取决于项目需求和个人习惯。
更多推荐
已为社区贡献1条内容
所有评论(0)