preface

Background management page usually more, imagine, if a page to jump to another page, if you are operating page, there are a lot of is the same, the only function point is different, so every time you all from the left side menu to find him, click the jump, experience the interaction is not so elegant, in order to solve this problem, many tabs component, is particularly important.

layout

parsing

1. Implement layout

2. When the number of labels exceeds the screen, the left and right arrow buttons need to be displayed for scrolling

3. A shortcut button is fixed on the right

4, each label can be closed

Add a drag effect to the label

6. Add right-click operation menu function to the label

7, adaptive width, display operation button

8. Click the label to go to the routing page

9, temporarily listed these, in fact, there are many can be achieved, a good experience of components, need to deal with more O(∩_∩)O haha ~

To realize the layout

This is just the layout idea, with some dynamic binding class code omitted. For the full code, check out the Github repository

Beyond the screen

Here we use a library, Element-resize -detector, install ****yarn add element-resize-detector

The core code

Fixed quick operation

The template implementation

The script code

Right-click TAB

Template code

The script code

Drag the

With the help of a vuedraggable plug-in, you can install ****yarn add vuedraggable

The core code

Label jump

The tag is assembled from watch route.fullPath and then from route in a simple TAB structure and saved in vuex. The jump code is as follows

Label persistence

The final result

Complete source code

Github.com/jekip/naive…

Please click Star. Thank you