脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue关闭当前弹窗页面

Vue关闭当前弹窗页面的两种方式

 更新时间：2023年07月04日 11:16:53   作者：李工是个程序员  
这篇文章主要给大家介绍了关于Vue关闭当前弹窗页面的两种方式,这是最近项目中遇到的一个需求,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

在 Vue 中关闭当前弹窗页面可以通过以下两种方式实现：

1、使用关闭按钮触发关闭事件

在弹窗组件中添加一个关闭按钮，并在点击事件中调用关闭弹窗的方法。例如：

<template>
  <div class="modal">
    <div class="modal-content">
      <span class="close" @click="closeModal">&times;</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>

以上两种方式都可以实现关闭当前弹窗页面的功能，具体使用哪种方式取决于项目需求和个人习惯。

总结

到此这篇关于Vue关闭当前弹窗页面的两种方式的文章就介绍到这了,更多相关Vue关闭当前弹窗页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论