快捷導(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è)需求,文中通過(guò)實(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)聽(tīng)關(guān)閉事件，并將彈窗的顯示狀態(tài)設(shè)置為 false。例如：

<template>
  <div>
    <button @click="showModal = true">打開(kāi)彈窗</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)閉彈窗

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

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

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

<template>
  <div>
    <button @click="showModal = true">打開(kāi)彈窗</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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目配置 webpack-obfuscator 進(jìn)行代碼加密混淆的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目配置 webpack-obfuscator 進(jìn)行代碼加密混淆,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-02-02
vue的虛擬DOM使用方式
這篇文章主要介紹了vue的虛擬DOM使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-09-09
基于vue實(shí)現(xiàn)分頁(yè)組件的示例代碼
分頁(yè)組件是一種用戶界面元素,用于在長(zhǎng)列表或數(shù)據(jù)集中分割內(nèi)容,分頁(yè)組件是每個(gè)開(kāi)發(fā)人員必須掌握的一個(gè)組件,廣泛應(yīng)用在各個(gè)場(chǎng)所,用以用戶方便閱讀等,本文就給大家介紹一下如何基于vue寫(xiě)出的分頁(yè)組件,需要的朋友可以參考下
2023-08-08
Vue3 Ref獲取真實(shí)DOM學(xué)習(xí)實(shí)戰(zhàn)
這篇文章主要為大家介紹了Vue3 Ref獲取真實(shí)DOM學(xué)習(xí)實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
vue mounted 調(diào)用兩次的完美解決辦法
在開(kāi)發(fā)中發(fā)現(xiàn)其中一個(gè)頁(yè)面moutned調(diào)用了兩次，而其他頁(yè)面正常，表示很懵逼，然后查找原因，終于找到了，其實(shí)歸根到底是要知道m(xù)ounted的調(diào)用機(jī)制問(wèn)題。這篇文章主要介紹了vue mounted 調(diào)用兩次的解決辦法,需要的朋友可以參考下
2018-10-10
vue頁(yè)面切換抖動(dòng)的問(wèn)題及解決過(guò)程
這篇文章主要介紹了vue頁(yè)面切換抖動(dòng)的問(wèn)題及解決過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2026-03-03
Vue3.5 新特性u(píng)seTemplateRe的使用小結(jié)
Vue3.5的useTemplateRef革新了模板引用方式,解決了傳統(tǒng)ref在類型安全、拼寫(xiě)檢查和動(dòng)態(tài)綁定上的痛點(diǎn),這一組合式函數(shù)允許直接聲明ref變量并自動(dòng)與模板綁定,下面就來(lái)詳細(xì)的介紹一下如何使用
2026-01-01
解決vue-router 嵌套路由沒(méi)反應(yīng)的問(wèn)題
這篇文章主要介紹了解決vue-router 嵌套路由沒(méi)反應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫(xiě)css
這篇文章主要介紹了詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫(xiě)css，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
vue項(xiàng)目中做編輯功能傳遞數(shù)據(jù)時(shí)遇到問(wèn)題的解決方法
這篇文章主要介紹了vue項(xiàng)目中做編輯功能傳遞數(shù)據(jù)時(shí)遇到問(wèn)題的解決方法，vue父組件向子組件傳遞數(shù)據(jù)的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12