Recently, when using vue, I encountered a requirement to realize that the left and right divs can be adjusted in width by dragging the middle part. This article will organize it and share it with you. The details are as follows: Rendering Breaking down componentsUse flex layout as a whole Left Panel
Right panel
Input parameter decompositionprops
slots
Specific implementationHow to drag?Add a hidden box between the left and right panels, and hide this box in box-shadow. Specific events are implemented in this div <div id="line" class="w-2 cursor-move hidden md4:block"onMousedown={hnadleMouseDown}> </div> Event Listeningconst hnadleMouseDown = (evt: MouseEvent) => { /* Get the starting point and store it*/ let { pageX, pageY } = evt; basePosition.pageX = pageX; basePosition.pageY = pageY; /* Listen for mouse movement events*/ document.addEventListener("mousemove", handleMouseMove); document.addEventListener("mouseup", handleMouseUp); }; const handleMouseMove = evt => { /* Prevent browser default events from triggering the browser's gesture function*/ evt.preventDefault(); /* Set the timer to prevent DOM from reflowing multiple times*/ clearTimeout(timer.value); timer.value = setTimeout(() => { let { pageX } = evt; const baseDiv = document.querySelector(".right-border-shadow"); /* Process width, whether it is between the maximum/minimum value*/ let baseWidth: Number | undefined = Number(baseDiv?.clientWidth) + (pageX - basePosition.pageX); baseWidth = baseWidth > Number(props?.maxWidth) ? props.maxWidth : baseWidth; baseWidth = Number(baseWidth) < Number(props?.minWidth) ? props.minWidth : baseWidth; baseDiv?.setAttribute("style", `width:${baseWidth}px`); /* emit width changed event */ ctx.emit("drugend"); /* Store to store */ setStore(baseWidth); }, 50); }; const handleMouseUp = evt => { /* After dragging ends, cancel event listening and emit the final width*/ const width = document.querySelector(".right-border-shadow")?.clientWidth; document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); ctx.emit("drugend", width); }; Width processingstyle={`width:${ store.get("split-width") ? store.get("split-width") : props.minWidth ? props.minWidth : 384 }px`} optimization Manually change the browser window width nextTick(() => { ctx.emit("load", ctx); MutationObserver = window.MutationObserver; if (MutationObserver) { /* Monitor browser window changes, this API is required in some cases */ mo = new MutationObserver(function() { const __wm = document.querySelector("#rezie-id"); // Re-call __canvasWM only when the __wm element changes if (!__wm) { //Avoid triggering mo.disconnect() all the time; mo = null; ctx.emit("resize"); } }); mo.observe(document.querySelector("#rezie-id"), { attributes: true, subtree: true, childList: true, }); } }); Not effective, please advise BugsAn error occurred when getting the slot element node of the child element in the onMounted hook of the parent component. The value is null. The current solution is to throw a load event in the onMounted hook of the child component, and the parent component uses onLoad to handle the subsequent logic. git addressWarehouse address preview address This is the end of this article about the implementation of the Vue3 draggable left and right panel split component. For more related Vue3 draggable left and right split panel content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Troubleshooting and solutions for MySQL auto-increment ID oversize problem
>>: How to install pyenv under Linux
I am using centos 7 64bit system here. I have tri...
Effect check address: Tour plan (uplanok.com) Cod...
Table of contents Preface 1. Tomcat class loader ...
First of all, for security reasons, JavaScript ca...
For historical reasons, MySQL replication is base...
Table of contents 1. MySQL compilation and instal...
How to install and configure MySQL on Mac OS 10.1...
This article mainly focuses on the installation a...
Every time you log in to the test server, you alw...
This article uses an example to describe how to q...
Table of contents 1. Write in front 2. Overlay to...
1. MySQL master-slave asynchrony 1.1 Network Dela...
Table of contents How to create a Pod? kubectl to...
Preface Recently, during an interview, I was aske...
px(pixel) I believe everyone is familiar with the...