最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度，本文就整理一下，分享给大家，具体如下：
效果图
分解组件
整体使用flex布局
左侧面板
- 面板的具体内容通过slot具名插槽传入。
- title通过prop传入
- 可拖动，为了保证内容样式不会被拖动所破坏，对面板的宽度设定最大值/最小值
右侧面板
- 右侧面板宽度随着左侧面板的宽度变化而变化，此处需注意，内容的宽度使用flex-auto自动适应。
- 需要做移动端的自适应。
- 自适应使用tailwind的媒体查询
入参分解
props
- @param {number} maxwidth 最大宽度
- @param {number} minwidth 最小宽度
- @param {string} lefttitle 左标题
- @param {string} righttitle 右标题？
- @param {boolean} sotoreage 是否存储与localstorege
slots
- left-content {element} 左侧内容
- right-content {element} 右侧内容
具体实现
如何拖动呢？
在左侧面板与右侧面板之间添加一个隐藏的盒子，我将这个盒子隐藏在box-shadow之中。具体事件放在这个div中实现
事件监听
宽度处理
优化
手动改变浏览器视窗宽度
未生效，求指点
bug
父组件的onmounted钩子中获取子元素的slot元素节点报错，为null。目前的解决办法是在子组件的onmounted钩子中抛出一个load事件，父组件使用onload去处理接下来的逻辑。
git地址
仓库地址
到此这篇关于vue3 可拖动的左右面板分割组件实现的文章就介绍到这了,更多相关vue3 可拖动左右分割面板内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
黄山市民网：https://www.huangshanshimin.com/
