How to use Vue to implement a floating/hidden menu in the upper right corner of the page

This time I will show you how to use Vue to implement a floating/hidden menu in the upper right corner of the page. What are the precautions for using Vue to implement a floating/hidden menu in the upper right corner of the page? Here is a practical case, let’s take a look. .

This is a very common feature on most websites. Clicking on the avatar in the upper right corner of the page will display a floating menu. Clicking elsewhere on the page or clicking the avatar again will hide the menu.

As a jQuery front-end siege lion, it is very easy to implement this function, but for a novice who has just glanced at the vue document, there are still pitfalls. It’s only complete if you step on it yourself.

Knowledge points

• Components and communication between components

• Calculation Properties

Text

##1. Parent component

Only the system menu function is involved here, so routing is not involved yet.

The basic idea is: pass the showCancel Boolean value to the child component through props, and bind events to the parent and child components respectively to control the display state of the system menu. In the bound click event of the parent component, the showCancel value passed in to the child component is reset.

This involves the first little knowledge point - subcomponent call:

First write the custom element waiting to be rendered by the subcomponent:

Then write the import Subcomponent:

Then register the subcomponent in the component:

At this point, new students may be confused about how these lines of code map the subcomponent to < t-header> tag, the official document says this:

When registering a component (or prop), you can use kebab-case (dash separated naming), camelCase (camel case naming) or PascalCase (Name with the first letter of the word capitalized);

In HTML template, please use kebab-case;

My understanding is (for example), when the custom element is When , the registered component name can be written in three ways: t-header, tHeader and THeader. In this case, the registered component will be automatically recognized and rendered to .

It should be noted that the above is an HTML template, which is specified with