elementplus+splitpanes实现左右拖动控制宽度的项目实践
作者:fendouweiqian
本文主要介绍了elementplus+splitpanes实现左右拖动控制宽度,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本文主要介绍了elementplus+splitpanes实现左右拖动控制宽度,具体如下“
关键代码
- 安装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 左右拖动宽度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!