Vue implements a floating/hidden system menu in the upper right corner of the page

This article mainly introduces Vue to implement a system menu that can be suspended/hidden in the upper right corner of the page. The implementation idea is to pass the Boolean value of showCancel to the child component through props, and bind events to the parent and child components respectively to control this. The display status of the system menu. Friends in need can refer to

This is a very common function on most websites. Click the avatar in the upper right corner of the page to display a floating menu. Click elsewhere on the page or click the avatar again to 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:

<t-header :showCancel=showCancel></t-header>

Then import the written sub-component:

import THeader from "./components/t-header/t-header";

Then register the sub-component in the component:

components: {
 THeader
}

At this point, new students may be confused about how these lines of code map subcomponents to the tag. The official documentation says this:

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

In the HTML template, please use kebab-case;

My understanding is (for example), when the custom element is , 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