vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > elementplus splitpanes 左右拖动宽度

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

作者:fendouweiqian

本文主要介绍了elementplus+splitpanes实现左右拖动控制宽度,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

本文主要介绍了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>

到此这篇关于elementplus+splitpanes实现左右拖动控制宽度的项目实践的文章就介绍到这了,更多相关elementplus splitpanes 左右拖动宽度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文