快捷導(dǎo)航

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

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

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

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

1、

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

2、

這就是SB2號(hào)吧，什么玩意

3、

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

我簡(jiǎn)單寫一下我的解決思路吧。

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

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

第一步，我們?cè)谧约旱膙ue模塊中整體添加了一個(gè)hidePanel事件，準(zhǔn)備整體區(qū)域進(jìn)行點(diǎn)擊，然后id為myPanel的div是我們要處理的那個(gè)小組件。

2、定義變量

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

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

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

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

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

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

您可能感興趣的文章: