目錄分解組件左側(cè)面板右側(cè)面板入?yún)⒎纸鈖ropsslots具體實(shí)現(xiàn)如何拖動(dòng)呢？事件監(jiān)聽(tīng)寬度處理優(yōu)化buggit地址

最近在使用vue的時(shí)候,遇到一個(gè)需求,實(shí)現(xiàn)左右div可通過(guò)中間部分拖拽調(diào)整寬度，本文就整理一下，分享給大家，具體如下：

效果圖

分解組件

整體使用flex布局

左側(cè)面板 面板的具體內(nèi)容通過(guò)slot具名插槽傳入。 title通過(guò)prop傳入 可拖動(dòng)，為了保證內(nèi)容樣式不會(huì)被拖動(dòng)所破壞，對(duì)面板的寬度設(shè)定最大值/最小值右側(cè)面板 右側(cè)面板寬度隨著左側(cè)面板的寬度變化而變化，此處需注意，內(nèi)容的寬度使用flex-auto自動(dòng)適應(yīng)。 需要做移動(dòng)端的自適應(yīng)。 自適應(yīng)使用tailwind的媒體查詢(xún)

入?yún)⒎纸鈖rops @param {Number} maxWidth 最大寬度 @param {Number} minWidth 最小寬度 @param {String} leftTitle 左標(biāo)題 @param {String} rightTitle 右標(biāo)題？ @param {Boolean} sotoreage 是否存儲(chǔ)與localstoregeslots left-content {Element} 左側(cè)內(nèi)容 right-content {Element} 右側(cè)內(nèi)容具體實(shí)現(xiàn)如何拖動(dòng)呢？

在左側(cè)面板與右側(cè)面板之間添加一個(gè)隱藏的盒子，我將這個(gè)盒子隱藏在box-shadow之中。具體事件放在這個(gè)div中實(shí)現(xiàn)

<div class='w-2 cursor-move hidden md4:block'onMousedown={hnadleMouseDown}></div>事件監(jiān)聽(tīng)

const hnadleMouseDown = (evt: MouseEvent) => { /* 獲取起始點(diǎn)位，并存儲(chǔ) */ let { pageX, pageY } = evt; basePosition.pageX = pageX; basePosition.pageY = pageY; /* 監(jiān)聽(tīng)鼠標(biāo)的移動(dòng)事件 */ document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); }; const handleMouseMove = evt => { /* 阻止瀏覽器默認(rèn)事件，防止觸發(fā)瀏覽器的手勢(shì)功能 */ evt.preventDefault(); /* 設(shè)置定時(shí)器，防止dom多次回流 */ clearTimeout(timer.value); timer.value = setTimeout(() => {let { pageX } = evt;const baseDiv = document.querySelector('.right-border-shadow');/* 處理寬度，是否處于最大值/最小值之間 */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寬度改變的事件 */ctx.emit('drugend');/* 存儲(chǔ)到store */setStore(baseWidth); }, 50); }; const handleMouseUp = evt => { /* 結(jié)束拖動(dòng)之后，取消事件監(jiān)聽(tīng)，并emit出最終寬度 */ const width = document.querySelector('.right-border-shadow')?.clientWidth; document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); ctx.emit('drugend', width); };寬度處理

style={`width:${ store.get('split-width') ? store.get('split-width') : props.minWidth ? props.minWidth : 384 }px`}優(yōu)化

手動(dòng)改變?yōu)g覽器視窗寬度

nextTick(() => {ctx.emit('load', ctx);MutationObserver = window.MutationObserver;if (MutationObserver) { /* 監(jiān)聽(tīng)瀏覽器的窗口變化，在部分情況下需要這個(gè)api */ mo = new MutationObserver(function() { const __wm = document.querySelector('#rezie-id'); // 只在__wm元素變動(dòng)才重新調(diào)用 __canvasWM if (!__wm) { // 避免一直觸發(fā) mo.disconnect(); mo = null; ctx.emit('resize'); } }); mo.observe(document.querySelector('#rezie-id'), { attributes: true, subtree: true, childList: true, });} });

未生效，求指點(diǎn)

bug

父組件的onMounted鉤子中獲取子元素的slot元素節(jié)點(diǎn)報(bào)錯(cuò)，為null。目前的解決辦法是在子組件的onMounted鉤子中拋出一個(gè)load事件，父組件使用onLoad去處理接下來(lái)的邏輯。

git地址

倉(cāng)庫(kù)地址預(yù)覽地址

到此這篇關(guān)于vue3 可拖動(dòng)的左右面板分割組件實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue3 可拖動(dòng)左右分割面板內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！