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">
            左側(cè)內(nèi)容
        </pane>

        <pane :size="100 - leftWidth">
           右側(cè)內(nèi)容
        </pane>
    </splitpanes>
</template>

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


// 動(dòng)態(tài)寬度（帶持久化）
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>
/* 容器高度設(shè)置 */
.custom-panes {
    height: calc(100vh - 100px); /* 根據(jù)實(shí)際布局調(diào)整 */
}

/* 左側(cè)邊框容器 */
.border-container {
    border: 0;
    height: 100%;
    padding: 0;
    overflow: auto;
}

/* 拖拽條樣式（穿透作用域）*/
:deep(.splitpanes__splitter) {
    background: #f0f0f0;
    width: 6px !important; /* 橫向布局時(shí)為垂直分割線 */
    position: relative;

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

    &:hover {
        background: #e0e0e0;
    }
}

/* 響應(yīng)式處理 */
@media (max-width: 768px) {
    .custom-panes {
        flex-direction: column; /* 移動(dòng)端改為垂直布局 */
    }

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

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