This article shares the specific code of Vue to implement drag and slide split panel for your reference. The specific content is as follows
Requirement background
The left is the list and the right is the details. Want to view details on a larger scale, so you need to drag and drop the slider to split the panel
Overall idea
- In terms of layout, flex layout is adopted, and the unit adopts percentage. Set flex: 1, let it automatically scale
- Slide the slider to calculate the percentage of the entire page during the slider.
- Assign percentages to the width of the list page through dynamic styles
- Also change the position of the slider (also a percentage form)
- The second is the use of mouse events in vue
Code implementation
Write events in template
@="mousedown"
Write method in methods
/**
* Press the mouse
*/
mousedown() {
('mousemove', , false);
('mouseup', , false);
},
/**
* Press the slider and move the mouse
*/
handleMouseMove(e) {
/**
* Calculate the total width of the container
* Calculate the distance from the slider to the left
* Calculate the offset percentage: (Distance from the slider to the left / Page width) * 100
* Pass the movement percentage and distance from the left
*/
const clientRect = this.$();
const offset = ;
const panelPercent = (offset / ) * 100;
= panelPercent;
= offset;
this.$ = panelPercent + '%';
('Dragging', );
},
/**
* Release the slider
*/
handleMouseUp () {
('mousemove', , false);
},Handle boundaries
if ( < ) {
=
}
if ( > ) {
=
}The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.