How to hide the current element in vuejs

The implementation method of hiding the current element in vuejs: 1. After the page is mounted, listen to the global click event; 2. Get the currently clicked element and obtain the attributes of the current element itself according to the needs; 3. Determine the current click Whether the element is the same as the element to be hidden; 4. If the currently clicked element is not the same as the element to be hidden, it will be hidden.

The operating environment of this article: Windows 7 system, vue version 2.9.6, DELL G3 computer.

How to hide the current element in vuejs?

Vue implements clicking outside the current element to hide the current element (implementation idea)

1. Binding elements

2. mounted life cycle

3. Implementation idea

• After the page is mounted, listen for global click events
• Get the currently clicked element and obtain the attributes of the current element itself according to the requirements
• Determine whether the currently clicked element and the element to be hidden are the same
• The currently clicked element and the element to be hidden are the same If not the same, hide

4. Final effect

Then let’s take a look at other aspects of the page outside the target element that vue implements. Hide the pop-up window in place

Method:

Step 1: Add a click event to the outermost element p on the page: @click="popShow = false”.

Step 2: Add a click event to the click target element: @click="popShow = true".

Note: popShow is a flag that controls the display and hiding of pop-up windows.

PS: Let’s take a look at vue’s implementation of clicking elsewhere to hide p

Method 1:

By listening to events

document.addEventListener('click',function(e){
    if(e.target.className!='usermessage'){
     that.userClick=false;
    }
})

Method 2 (better):

Add a click event to the outermost p @click="userClick=false "

Add to the clicked element: @click.stop="userClick=!userClick"

Method 3:

<template>
<!--向页面添加关闭p的事件监听-->
<p class="page" @click="hide">

<!--添加.stop防止page的点击事件触发，导致无法显示p-->
<button @click.stop="show">点击显示p</button>

<!--指定的p。添加.stop防止点击p内的元素时，整个p被关闭-->
<p @click.stop>
...
</p>

</p>
<template>

<script>
export default {
methods:{
show(){},
hide(){}
}

}
</script>

Summary:

The .stop modifier of the vue.js event can prevent the event from continuing to bubble and propagate, or you can use the event.stopPropagation() method of the native js event.

By adding .stop to the specified p, you can realize that only when you click on an element that is not within the p, it will bubble up to the page, thereby hiding the p when you click elsewhere.

You need to add .stop to the button that triggers the display of p. Otherwise, as soon as the button is clicked, show() is triggered and then propagated to the page, hide() will be triggered immediately, and p will not be displayed.

Recommended: "The latest 5 vue.js video tutorial selections"

The above is the detailed content of How to hide the current element in vuejs. For more information, please follow other related articles on the PHP Chinese website!