快捷導(dǎo)航

Vue關(guān)閉當(dāng)前彈窗頁面的兩種方式

更新時間：2023年07月04日 11:16:53 作者：李工是個程序員

這篇文章主要給大家介紹了關(guān)于Vue關(guān)閉當(dāng)前彈窗頁面的兩種方式,這是最近項目中遇到的一個需求,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

1、使用關(guān)閉按鈕觸發(fā)關(guān)閉事件

在彈窗組件中添加一個關(guān)閉按鈕，并在點擊事件中調(diào)用關(guān)閉彈窗的方法。例如：

<template>
  <div class="modal">
    <div class="modal-content">
      <span class="close" @click="closeModal">&times;</span>
      <p>彈窗內(nèi)容</p>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    closeModal() {
      this.$emit('close');
    }
  }
}
</script>

在父組件中監(jiān)聽關(guān)閉事件，并將彈窗的顯示狀態(tài)設(shè)置為 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、使用路由守衛(wèi)關(guān)閉彈窗

在打開彈窗的路由中添加一個 beforeRouteLeave 路由守衛(wèi)，當(dāng)離開該路由時關(guān)閉彈窗。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/modal',
      component: Modal,
      beforeRouteLeave(to, from, next) {
        this.$emit('close');
        next();
      }
    }
  ]
});

在父組件中監(jiān)聽關(guān)閉事件，并在關(guān)閉事件中調(diào)用關(guān)閉彈窗的方法。例如：

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

以上兩種方式都可以實現(xiàn)關(guān)閉當(dāng)前彈窗頁面的功能，具體使用哪種方式取決于項目需求和個人習(xí)慣。