In fact, I don’t think this is a big problem. It was quite simple to implement with jquery before, but today I can’t help it. I want to pop up a small area in the Vue project, and click on a place outside this area to close it. the popup area. I read it on the Internet before, and there are quite a lot of answers, but I really want to scold them, but to scold them, I have to register and log in to those technical websites. I really don’t want to bother, so I will post a few of their answers.
1、
Someone made this answer, let’s evaluate it as SB1 for the time being. I think anyone who has used Vue for more than a week will know that it is necessary to adjust a click event, and then change the value of the v-if variable. Cloud storage on the Internet is very good now , but this kind of people often post some irrelevant things on the Internet, and even the answers are not what the question is asked, and they can't bear to look directly at them;
2、
This is number SB2, what the hell
3、
The answer is really short. If you can or have done it, if you want to answer it, you should write down your thoughts. You write this thing, how to use it for many people who have not started.
Let me simply write down my solution.
1. Contents in the vue module
<template>
<div class="hello" v-on:click="hidePanel">
<div id="myPanel" v-if="panelShow"></div>
</div>
</template>
In the first step, we added a hidePanel event in our vue module as a whole to prepare the whole area for clicking, and then the div with the id of myPanel is the widget we want to process.
2. Define variables
data () {
return {
panelShow: true
}
}
Until this step, many people also understand that it is an ordinary thing
3. The third step is the key point. In fact, everyone knows that an event needs to be triggered, and then this event is still a click event. Only when we click to a place where our id is other than myPanel can we perform some operations, that is, assign the value of panelShow to false. One step is what many people want to ask. You said those who answered didn’t think of this, did they just don’t want to say it? I don’t think there is any problem with them being SB
methods: {
hidePanel: function(event){
var sp = document.getElementById("myPanel");
if(sp){
if(!sp.contains(event.target)){ //This sentence means that if we click on an area other than myPanel with the id
this.panelShow = false;
}
}
}
}
We may have all found a common problem, that is, when you want to look up something on the Internet, you can always find some people's answers, you just can't bear to look directly at them, so I hope that the things I write will be more useful, and we should all encourage ourselves be brave and passionate