快捷導(dǎo)航

elementplus+splitpanes實(shí)現(xiàn)左右拖動(dòng)控制寬度的項(xiàng)目實(shí)踐

更新時(shí)間：2025年05月15日 09:37:22 作者：fendouweiqian

本文主要介紹了elementplus+splitpanes實(shí)現(xiàn)左右拖動(dòng)控制寬度,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

本文主要介紹了elementplus+splitpanes實(shí)現(xiàn)左右拖動(dòng)控制寬度，具體如下“

在這里插入圖片描述

關(guān)鍵代碼

安裝splitpanes

npm install --save-dev @types/splitpanes

關(guān)鍵代碼

<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>

到此這篇關(guān)于elementplus+splitpanes實(shí)現(xiàn)左右拖動(dòng)控制寬度的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)elementplus splitpanes 左右拖動(dòng)寬度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: