快捷導(dǎo)航

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

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

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

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

在彈窗組件中添加一個(gè)關(guān)閉按鈕，并在點(diǎ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)閉彈窗

在打開彈窗的路由中添加一個(gè) beforeRouteLeave 路由守衛(wèi)，當(dāng)離開該路由時(shí)關(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>

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

總結(jié)

到此這篇關(guān)于Vue關(guān)閉當(dāng)前彈窗頁(yè)面的兩種方式的文章就介紹到這了,更多相關(guān)Vue關(guān)閉當(dāng)前彈窗頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: