Shulou(Shulou.com)06/03 Report--

This article shows you how vuejs hides the current element. The content is concise and easy to understand. It will definitely make your eyes shine. I hope you can gain something from the detailed introduction of this article.

vuejs implementation method of hiding the current element: 1. After the page is mounted, monitor the global click event;2. Obtain the currently clicked element and obtain the attributes of the current element itself according to the requirements;3. Determine whether the currently clicked element is the same as the element to be hidden;4. Hide if the currently clicked element is different from the element to be hidden.

Operating environment: Windows 7 system, vue version 2.9.6, DELL G3 computer.

How does vuejs hide the current element?

Vue implements hiding the current element by clicking somewhere other than the current element (implementation idea)

1. binding element

2. mounted life cycle

3. realization idea

After the page is mounted, listen for global click events

Obtain the currently clicked element, and obtain the attributes of the current element itself according to requirements.

Determine whether the currently clicked element is the same as the element to be hidden

Hide if the currently clicked element is different from the element to be hidden

4. final effect

Next, look at the vue implementation. Click on the target element. Hide the pop-up elsewhere on the page.

Methods:

Step 1: Add a click event to the page's most outgoing element p: @click="popShow = false".

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

Note: popShow is a sign that controls pop-up display and hiding.

PS: See below vue implementation click elsewhere to hide p

Method 1:

By listening for 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 @click.stop="userClick=!" to the clicked element. userClick"

Method 3:

Click to show p...

export default {methods:{show(){},hide(){}}}

Summary:

You can prevent the event from continuing to bubble by using the.stop modifier of the vue.js event, or you can use the event.stopPropagation() method of the native js event.

By adding.stop to the specified p, you can achieve that only when you click on an element outside the p, it will bubble up to the page, so that you can click elsewhere to hide the p.

To add.stop to the button that triggers p, otherwise a click of the button triggers show() and propagates to page, immediately triggers hide(), p cannot be displayed.

The above is how vuejs hides the current element. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserves, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.