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

更新时间：2023年07月04日 11:16:53 作者：李工是个程序员

这篇文章主要给大家介绍了关于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关闭当前弹窗页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

elementUI checkBox报错Cannot read property &ap
这篇文章主要为大家介绍了elementUI checkBox报错Cannot read property 'length' of undefined的解决分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
Vue 设置axios请求格式为form-data的操作步骤
今天小编就为大家分享一篇Vue 设置axios请求格式为form-data的操作步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
element-plus结合sortablejs实现table行拖拽效果
使用element-plus的el-table组件创建出来的table,结合sortable.js实现table行拖动排序,文中有详细的代码示例供大家参考,具有一定的参考价值,感兴趣的同学可以自己动手试一试
2023-10-10
vue 中 beforeRouteEnter 死循环的问题
这篇文章主要介绍了vue beforeRouteEnter 死循环的问题,在文章末尾给大家补充介绍了vue中beforeRouteEnter使用的误区，需要的朋友可以参考下
2019-04-04
vant实现购物车功能
这篇文章主要为大家详细介绍了vant实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
关于vue中watch检测到不到对象属性的变化的解决方法
本篇文章主要介绍了关于vue中watch检测到不到对象属性的变化的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
使用VUE实现一键复制内容功能
这篇文章主要介绍了使用VUE实现一键复制内容功能,功能就是当我们点击复制按钮时，会提示“复制成功”，这样复制的内容就可以在其他地方使用了，感兴趣的朋友可以学习一下
2023-04-04
解决vue scoped scss 无效的问题
这篇文章主要介绍了解决vue scoped scss 无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue3导出pdf文件详细方案
这篇文章主要给大家介绍了关于Vue3导出pdf文件的相关资料,最近项目有个需求,将系统统计的数据生成分析报告,然后可以导出成PDF,这里给大家总结下,需要的朋友可以参考下
2023-08-08
vue-json-editor json编辑器的使用
本文主要介绍了vue-json-editor json编辑器的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07