網(wǎng)站做ulr跳轉(zhuǎn),云營銷網(wǎng)站建設(shè)電話咨詢,建設(shè)wap手機(jī)網(wǎng)站,創(chuàng)新的網(wǎng)站日常開發(fā)中經(jīng)常遇到需要手動調(diào)整內(nèi)容區(qū)大小的場景#xff0c;比如側(cè)邊欄、彈窗、報表面板等。分享一個我寫的「拖拽調(diào)整大小指令」#xff0c;支持自定義最小尺寸、拖拽手柄樣式#xff0c;能監(jiān)聽尺寸變化#x1f4cc; 先看效果#x1f6e0; 核心代碼解析指令文件 directi…日常開發(fā)中經(jīng)常遇到需要手動調(diào)整內(nèi)容區(qū)大小的場景比如側(cè)邊欄、彈窗、報表面板等。分享一個我寫的「拖拽調(diào)整大小指令」支持自定義最小尺寸、拖拽手柄樣式能監(jiān)聽尺寸變化 先看效果 核心代碼解析指令文件directives/resizable-full.js關(guān)鍵部分1. 指令鉤子初始化 更新 清理Vue 指令的 3 個核心鉤子保證指令的生命周期完整jsexport default { bind(el, binding) { // 指令綁定時初始化拖拽功能 initResizable(el, binding); }, update(el, binding) { // 禁用狀態(tài)變化時重新初始化 if (binding.value?.disabled ! binding.oldValue?.disabled) { cleanupResizable(el); // 先清理舊的 initResizable(el, binding); // 再初始化新的 } }, unbind(el) { // 指令解綁時清理所有手柄和事件避免內(nèi)存泄漏cleanupResizable(el); } };2. 初始化拖拽創(chuàng)建手柄 核心邏輯initResizable是核心函數(shù)主要做 2 件事創(chuàng)建拖拽手柄、寫拖拽邏輯。1創(chuàng)建拖拽手柄我只保留了「右下角」的拖拽手柄其他方向注釋掉了需要的話自己解開樣式可自定義js// 定義手柄配置只留了bottom-right const handles [ { dir: bottom-right, style: { bottom: 0, right: 0, cursor: nwse-resize } } ]; // 循環(huán)創(chuàng)建手柄元素 handles.forEach(handleConf { const handle document.createElement(div); handle.className resizable-handle resizable-handle--${handleConf.dir}; handle.dataset.dir handleConf.dir; // 手柄樣式小方塊、半透明、hover高亮 Object.assign(handle.style, { position: absolute, width: ${handleSize}px, height: ${handleSize}px, background: handleColor, opacity: 0.6, zIndex: 999, transition: opacity 0.2s, ...handleConf.style }); // hover時手柄高亮 handle.addEventListener(mouseenter, () handle.style.opacity 1); handle.addEventListener(mouseleave, () handle.style.opacity 0.6); el.appendChild(handle); // 把手柄加到目標(biāo)元素上 el._resizableConfig.handles.push(handle); // 存起來方便后續(xù)清理 });2拖拽核心邏輯分 3 步按下鼠標(biāo)記錄初始狀態(tài)→ 移動鼠標(biāo)計算新尺寸→ 松開鼠標(biāo)觸發(fā)回調(diào) 清理js// 1. 按下鼠標(biāo)記錄初始位置和尺寸 const mouseDownHandler (e) { const handle e.target.closest(.resizable-handle); if (!handle) return; e.stopPropagation(); e.preventDefault(); const dir handle.dataset.dir; const rect el.getBoundingClientRect(); // 獲取元素當(dāng)前位置和尺寸 // 存初始狀態(tài)鼠標(biāo)位置、元素尺寸/位置 startState { dir, startX: e.clientX, startY: e.clientY, startWidth: rect.width, startHeight: rect.height }; // 綁定移動/松開事件綁在document上避免拖拽時鼠標(biāo)移出元素失效 document.addEventListener(mousemove, onMouseMove); document.addEventListener(mouseup, onMouseUp); }; // 2. 移動鼠標(biāo)計算新寬高并賦值 const onMouseMove (e) { if (!startState) return; const { dir, startX, startY, startWidth, startHeight } startState; let newWidth startWidth; let newHeight startHeight; // 只處理右下角拖拽寬高都增加 if (dir bottom-right) { newWidth startWidth (e.clientX - startX); newHeight startHeight (e.clientY - startY); } // 限制最小寬高避免拖到太小 newWidth Math.max(minWidth, newWidth); newHeight Math.max(minHeight, newHeight); // 給元素設(shè)置新尺寸 el.style.width ${newWidth}px; el.style.height ${newHeight}px; }; // 3. 松開鼠標(biāo)觸發(fā)回調(diào)清理事件 const onMouseUp () { // 拖拽結(jié)束觸發(fā)自定義回調(diào)返回最新尺寸 if (startState el._resizableConfig.onResize) { el._resizableConfig.onResize({ width: parseInt(el.style.width), height: parseInt(el.style.height) }); } startState null; // 移除事件避免重復(fù)綁定 document.removeEventListener(mousemove, onMouseMove); document.removeEventListener(mouseup, onMouseUp); }; // 給元素綁定按下事件 el.addEventListener(mousedown, mouseDownHandler);3. 清理函數(shù)避免內(nèi)存泄漏cleanupResizable負(fù)責(zé)移除所有手柄元素和事件監(jiān)聽器指令解綁時必執(zhí)行jsfunction cleanupResizable(el) { if (el._resizableConfig) { // 移除所有手柄 el._resizableConfig.handles.forEach(handle { if (handle.parentNode el) el.removeChild(handle); }); // 移除所有事件監(jiān)聽器 el.removeEventListener(mousedown, el._resizableConfig.mouseDownHandler); document.removeEventListener(mousemove, el._resizableConfig.mouseMoveHandler); document.removeEventListener(mouseup, el._resizableConfig.mouseUpHandler); // 刪除配置釋放內(nèi)存 delete el._resizableConfig; } } 如何使用全局注冊指令main.jsjsimport resizableFull from ./directives/resizable-full; Vue.directive(resizable-full, resizableFull);2.頁面中使用vuetemplate !-- 給需要拖拽的元素加指令 -- div v-resizable-full{ minWidth: 300, // 最小寬度 minHeight: 200, // 最小高度 handleSize: 10, // 手柄大小 handleColor: #409eff, // 手柄顏色 onResize: handleResize // 拖拽結(jié)束回調(diào) } styleposition: relative; width: 400px; height: 300px; border: 1px solid #eee; 我是可拖拽調(diào)整大小的內(nèi)容區(qū) /div /template script export default { methods: { // 拖拽結(jié)束拿到最新尺寸 handleResize({ width, height }) { console.log(新尺寸, width, height); } } }; /script 關(guān)鍵注意點避坑目標(biāo)元素必須設(shè)position: relative/absolute/fixed因為手柄是絕對定位依賴父元素的定位事件綁在 document 上拖拽時鼠標(biāo)可能移出目標(biāo)元素綁在 document 上才不會斷一定要清理事件 / 元素指令解綁時執(zhí)行cleanupResizable避免內(nèi)存泄漏最小尺寸限制通過minWidth/minHeight避免元素被拖到太小影響體驗。 擴(kuò)展玩法解開注釋的其他 7 個方向手柄實現(xiàn)全方向拖拽給手柄加 hover 提示比如 “拖拽調(diào)整大小”支持拖拽時實時觸發(fā)回調(diào)不止結(jié)束時自定義手柄樣式比如改成虛線、加圖標(biāo)。 總結(jié)這個自定義指令核心是「創(chuàng)建拖拽手柄 監(jiān)聽鼠標(biāo)事件 計算尺寸變化」邏輯不復(fù)雜可以根據(jù)自己的業(yè)務(wù)場景定制。親測報表和彈窗都很適用