快捷導(dǎo)航

vue2.0實現(xiàn)點擊其他區(qū)域關(guān)閉自定義div功能

更新時間：2023年06月26日 11:59:44 作者：經(jīng)海路大白狗

這篇文章主要介紹了vue2.0實現(xiàn)點擊其他區(qū)域關(guān)閉自定義div功能實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

其實我覺得這不是一個很大的問題，之前用jquery實現(xiàn)起來也挺簡單的，但今天我有點忍不住了，想把vue項目中，自己彈出了一個小區(qū)域，點擊這個區(qū)域以外的地方關(guān)閉這個彈出區(qū)域。我之前在網(wǎng)上看了，回答還是挺多的，但我挺想罵他們的，但罵他們還得注冊登錄那些技術(shù)網(wǎng)站，實在是不想費勁，我就把他們的回答貼出來幾個吧。

1、

有人做這個回答，暫且評價其為SB1號吧，我想只要用了vue超過1歌星期的都會知道，要調(diào)個點擊事件，然后改變那個v-if變量值，互聯(lián)網(wǎng)現(xiàn)在云存儲是挺好的，但這種人經(jīng)常在網(wǎng)上發(fā)一些無關(guān)緊要，甚至所答非所問的東西，簡直不忍直視；

2、

這就是SB2號吧，什么玩意

3、

回答果然簡短至極，你如果會或者做過，如果想回答就好好把你的思路寫出來，你寫個這東西，很多沒有入門的怎么使用。

我簡單寫一下我的解決思路吧。

1、vue模塊中的內(nèi)容

<template>
? ? ? ? <div class="hello" ?v-on:click="hidePanel">
<div id="myPanel" v-if="panelShow"></div>
? ? ? ?</div>
? ?</template>

第一步，我們在自己的vue模塊中整體添加了一個hidePanel事件，準(zhǔn)備整體區(qū)域進(jìn)行點擊，然后id為myPanel的div是我們要處理的那個小組件。

2、定義變量

data () {
?? return {
panelShow: true
}
? ? }

一直到這一步很多人也都明白，就是平常的東西

3、第三步才是重點，其實大家都知道，要觸發(fā)一個事件，然后這個事件還是點擊事件，點擊到我們這個id是 myPanel以外的地方才進(jìn)行一些操作，也就是把panelShow賦值為false，這一步才是很多人想問的。你說那些回答的人就想不到這一點嗎，就是不想說嗎，說他們SB我覺得都一點問題都沒有

methods: {
hidePanel: function(event){
var sp = document.getElementById("myPanel");
if(sp){
if(!sp.contains(event.target)){ ? ? ? ? ? ?//這句是說如果我們點擊到了id為myPanel以外的區(qū)域
this.panelShow?= false;
}
}
}
? ?}

我們可能都發(fā)現(xiàn)過一個共同的問題，那就是你想去網(wǎng)上查東西的時候，總能發(fā)現(xiàn)一些人的回答，簡直就是不忍直視，所以我希望寫出的東西更加有用，我們都應(yīng)該鼓勵自己做勇敢而又熱情的人

到此這篇關(guān)于vue2.0 點擊其他區(qū)域關(guān)閉自定義div的文章就介紹到這了,更多相關(guān)vue點擊其他區(qū)域關(guān)閉自定義div內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: