Vue如何用Split库打造支持长尾词的拖拽滑动分隔组件？

本文共计3488个文字，预计阅读时间需要14分钟。

前言：手动封装一个类似Iview中的Split组件，可将要区域分割为可拖动调整宽度的两部分区域。

开始：

基础布局：

在vue工程中创建SplitPane组件：

vue

.split-pane { display: flex; position: relative;}.split-pane-left,.split-pane-right { transition: width 0.3s;}.split-pane-resizer { position: absolute; top: 0; bottom: 0; width: 10px; cursor: col-resize;}

引入页面使用：

vue 左侧内容 右侧内容

最终效果如下：


前言

手动封装一个类似Iview中的Split组件，可将一片区域，分割为可以拖拽调整宽度或高度的两部分区域，最终效果如下：

开始

基础布局

在vue工程中创建SplitPane组件，引入页面使用。