This is the 11th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

View navigation bar from nuggets

Navigation. Navigation! Navigation?

Since the List article in the previous chapter looked at a wave of nuggets, this chapter will continue to analyze the nuggets from the List.

In fact, the main reason is that layout components, if not for a business development, basically provide a basic skeleton, and then the user needs to modify.

What if we have a business requirement and develop a component for it?

Based on this simulation requirement, let’s take the nugget as an example and change a component.

Let’s look at demand first.

Since we’re going to do a bunch of navigation components based on the Nuggets, it’s a good idea to take a look at what the Nuggets navigation looks like.

You can open a gold page, or go on to see, will be detailed analysis.

Here are a few things to look out for.

A sub menu

Home to see the home page, from top to bottom are three menus, the top of the menu to determine the interface to see.

The home page secondary menu determines the display of a general direction of the article.

The three levels at the bottom determine the subcategories.

Of course, it’s not up to us to show what content, so developers need to do it.

When developing a component, we are concerned with how it should be componentized.

This navigation bar is quite simple, mainly to control the two level three menu show hidden. And the need to deal with nesting

What if, combined with the drop-down menu of the active interface?

It is not difficult, this part does not need to be handled in the component, let the developer to deal with it. After all, components don’t have to consider everything

Understand applause.

Offer it!

Nuggets navigation bar is still simple ah, in this case, it directly opened.

The List component in the previous chapter analyzed the List items from the bottom up, so this time the navigation bar works from the top down.

Let’s start with the top-level parent structure.

The parent layer structure is actually relatively simple, in the final analysis, the secondary menu, the tertiary menu is actually a navigation bar, but the primary menu controls whether the secondary display, the secondary control three, and so on.

block content
ul.yx-menu(
  :class="`yx-menu`"
)
  slot
Copy the code

Each item in the navigation bar is changed from ul to LI, multiple click events, and the activation style, not written in one.

If you have a regular first – and second-level menu, you must have a group to wrap the children. There is no nugget navigation bar, but still write the structure of the item group, the common navigation bar is still needed.

block content li.yx-submenu( :class="'is-active': IsActive "@click="handleClick") div. Yx-menu-title // group name slot(name="title") yx-icons(type="arrow-down") :class="{'is-active': IsActive}") transition(name="scaleY" ref="trigger" V-if =" HORIZONTAL ") ul.yx-menu(V-show ="isActive"Copy the code

The dropdown section can be written in the component and controlled by a parameter or by determining whether $slots.dropdown exists, but it is advisable not to do this. This section is better handled at development time. Unless it is used frequently in a project.

As for the logical part of the navigation bar, since the logical part of the navigation bar component is largely left to development time, the component simply passes the click event to control the isActive state of the current item. So click the table.

The last

This is the end of the basic zero logic component, then start to slowly dive into the more logical layout components, hopefully if there are components you want to see can leave a comment footprint. I can properly adjust the order of the article.