Indefinite navigation bar production
1. Requirements To
make multi-level navigation, and the navigation depth is uncertain, make a tool that only needs to provide navigation data to make it perfect. Of course, this data has to be processed by people to meet the conditions of use. Don't be scared by this, it's very simple.
2. Navigation in
this article This article mainly introduces the production and processing ideas of indefinite depth navigation in two situations.
The first type: right-click the designated position to pop up the first level of navigation, and the subsequent navigation is automatically displayed and hidden by moving the mouse.
----------- Another feature of the subsequent navigation is that when the mouse is on the navigation of "Grandpa", the navigation of "Grandson" should be hidden.
The second type: completely through the left side of the mouse. The display and hiding of navigation must satisfy the first kind of processing relationship between "Grandpa" and "Sun"
.
3.
Before the recursive component officially starts, let’s talk about a topic, indefinite navigation, and uncertain label items. In addition to making it through js, if you use tags to make it, you can only use recursion to make it (currently I knew). Since vue is commonly used, I will use vue to introduce it here.
Note that you call yourself, so the text at 1 and 2 is the same.
It’s the same but it’s not. If you’re familiar with it, you might know what’s going on. I’ll give you two examples to illustrate:
name:"MyCompoents" -----> Tag: my-compoents
name:"Test" ----- --> Label: test, do
n't use keywords
4. The first type: right-click combined with mouse events. I
don’t know if anyone is frightened by the processing of the data in the first item. Let me list an example of the data I made:
list: [
{
name: "a1",
childrenShow:false,
children: [
{
name: "a11",
father:"a1",
childrenShow:false,
children: [
{
name: "a111",
father:"a11",
},
{
name: "a112",
father:"a11",
}
]
},{
name: "a12",
father:"a1",
childrenShow:false,
children: [
{
name: "a121",
father:"a12",
},
{
name: "a122",
father:"a12",
}
]
}
]
},
{
name: "a2",
childrenShow:false,
children: [
{
name: "a21",
father:"a2",
childrenShow:false,
children: [
{
name: "a211",
father:"a21",
childrenShow:false,
children: [
{
name: "a2111",
father:"a211",
},
{
name: "a2112",
father:"a211",
},
{
name: "a2113",
father:"a211",
childrenShow:false,
children: [
{
name: "a21131",
father:"a2113",
childrenShow:false,
children: [
{
name: "a211311",
father:"a21131",
},
]
},
]
}
]
},
{
name: "a212",
father:"a22",
}
]
},{
name: "a22",
father:"a2",
childrenShow:false,
children: [
{
name: "a221",
father:"a21",
},
{
name: "a222",
father:"a22",
}
]
}
]
},
{
name: "a3",
childrenShow:false,
children: [
{
name: "a31",
father:"3",
childrenShow:false,
children: [
{
name: "a311",
father:"a31",
},
{
name: "a312",
father:"a32",
}
]
},{
name: "a32",
father:"a3",
childrenShow:false,
children: [
{
name: "a321",
father:"a31",
},
{
name: "a322",
father:"a32",
}
]
}
]
}
],
Look at the black and gray background, it’s uncomfortable, then look at the following
Is it very simple, if there is a "son list", add a childrenShow: false, and the corresponding children array, and name it as needed.
After the data has been processed
, let's start making: a method to hide the navigation box by clicking on other parts of the screen and a method to determine the display position of the navigation box when right-clicking.
The important thing is here: the
solution: the
mouse enters, let your own son display, so that the son of the brother with the same gradient is not displayed, and at the same time, if the current object has'grandchildren', let its'grandchildren' hide .
This.item = item in the picture is unnecessary
Mouse out: If the navigation has no father, hide it
result:
5. The second type: trigger by right-clicking and clicking
Solution: Compared with the first one, the next event is the mouseleave event, so here you only need to copy the mouseover event above as a click event.
Directly on the code below:
Result:
6. Summary The
above two methods can finally be realized, choose according to the scene.
At the same time, let me share the problems
I encountered in the process of making this thing: 1. I want to use a vue file to complete the function.
This is actually impossible (my current understanding), because the component calls itself, and the sub-component receives the data it wants to display through props. If the data is written in a component, the implementation is also in this component, which will cause an endless loop. , The component keeps calling itself (what he wants to show is children, but in fact what he shows is always the outermost layer), and the outermost data has children, it will cause memory overflow.
2. Mouseenter cannot be used and only mouseover can be used.
From the label structure, it is known that
mousemove will not trigger the mouseenter event from the'children generation' to the direct'parent generation'.
3. The problem of data transmission
is the original idea. Deep copy the data from the "father" without changing the data of the father (it was such a simple idea at the beginning), but later discovered that when the mouse is on the "father", it is necessary to control the "grandchild" to hide , How? In the beginning, I didn’t want to change the data of "father", but now I want to control the display of the data of "grandson", so in the end I didn't make a deep copy of the data of "father", so that "children and grandchildren" can perform the entire list data Modification, since the data received by the current component has its own and the direct "children" data behind it, these data can be changed to change the display problem of "grandson" data.
4. Expansion
At first, I thought about the solution of this problem for a long time, and at the beginning, I didn't find a solution on Baidu. Maybe the topic I searched was wrong. And through this time I first came into contact with the idea and practice of tag recursion.
When it comes to how to achieve the desired effect, I have been thinking about it for a long time, but I still don't know how to judge when and what changes will happen. You only need to control the display of the data of this layer and the data of "grandchildren" until it is reflected later.
5. In the end,
don't keep thinking, programming for Baidu or communicating with colleagues can make you gain.
I posted it for the first time. I am also a novice with less than one year of work experience. If you have any wrong opinions, please refer to the official for correction.