elementplus+splitpanes实现左右拖动控制宽度的项目实践

npm install --save-dev @types/splitpanes

<template>
    <splitpanes class="custom-panes" :min-percent="10" :max-percent="90" @resize="handleResize">
        <pane :size="leftWidth" :min-size="15" :max-size="40">
            左侧内容
        </pane>

        <pane :size="100 - leftWidth">
           右侧内容
        </pane>
    </splitpanes>
</template>

<script lang="ts" setup>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'


// 动态宽度（带持久化）
const leftWidth = ref(localStorage.getItem('splitWidth') ? Number(localStorage.getItem('splitWidth')) : 20)

const handleResize = (e: any) => {
    if (e[0]?.size) {
        leftWidth.value = e[0].size
        localStorage.setItem('splitWidth', e[0].size.toString())
    }
}
</script >

<style scoped>
/* 容器高度设置 */
.custom-panes {
    height: calc(100vh - 100px); /* 根据实际布局调整 */
}

/* 左侧边框容器 */
.border-container {
    border: 0;
    height: 100%;
    padding: 0;
    overflow: auto;
}

/* 拖拽条样式（穿透作用域）*/
:deep(.splitpanes__splitter) {
    background: #f0f0f0;
    width: 6px !important; /* 横向布局时为垂直分割线 */
    position: relative;

    &::before {
        content: '';
        position: absolute;
        left: 1px;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 20px;
        background: #ddd;
    }

    &:hover {
        background: #e0e0e0;
    }
}

/* 响应式处理 */
@media (max-width: 768px) {
    .custom-panes {
        flex-direction: column; /* 移动端改为垂直布局 */
    }

    :deep(.splitpanes__splitter) {
        width: 100% !important; /* 横向分割线 */
        height: 6px !important;

        &::before {
            width: 20px;
            height: 2px;
            left: 50%;
            top: 1px;
            transform: translateX(-50%);
        }
    }
}
</style>