在 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>

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

Logo

前往低代码交流专区

更多推荐