溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue.js怎樣實現(xiàn)彈窗功能

發(fā)布時間:2021-10-09 18:14:04 來源:億速云 閱讀:213 作者:柒染 欄目:編程語言

這篇文章將為大家詳細講解有關vue.js怎樣實現(xiàn)彈窗功能,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關知識有一定的了解。

vue.js實現(xiàn)彈窗功能的方法:【document.addEventListener('mouseup',(e)=>{var _con = document.getElementById('children-view')if(_c...】。

本文操作環(huán)境:windows10系統(tǒng)、vue.js 2.9、thinkpad t480電腦。

實現(xiàn)思路:

在點擊完之后點擊其他位置跳轉(zhuǎn)路由,路由跳轉(zhuǎn)后利用computed屬性監(jiān)聽$route進行class的顯示和隱藏,利用的是js Contains方法

實現(xiàn)代碼:

document.addEventListener('mouseup',(e)=>{
   var _con = document.getElementById('children-view')
   if(_con && !_con.contains(e.target){
       this.$route.push({
           name:"Index"
       })    
   } 
})

關于vue.js怎樣實現(xiàn)彈窗功能就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI