前言
在前端开发中，有时候需要将一个页面分割成两个独立的部分，比如实现一个可拖拽的列表，左侧为列表，右侧为详细信息。你可能会想到使用 iframe 元素来实现，但这种方式会导致各种问题，如样式的不同步、性能问题等。现在，有一个更好用的方案，那就是使用 splitjs 包。它是一个轻量级的 JavaScript 库，用于将页面分成两个独立的部分，同时支持拖拽调整宽度。
安装
首先，你需要使用 npm 来安装 splitjs。
npm install splitjs --save
使用
在引入 splitjs 后，我们需要创建一个类似于下面这样的 HTML 结构：
<div class="split">
<div class="split-item">
<!-- 左侧内容 -->
</div>
<div class="split-item">
<!-- 右侧内容 -->
</div>
</div>然后，在你的 JavaScript 代码中，添加以下代码：
import Split from 'splitjs'
Split(['.split-item', '.split-item'], {
sizes: [30, 70],
minSize: [100, 300],
gutterSize: 10
})这里，我们使用了 Split 函数，它接受两个参数，第一个参数是一个数组，包含需要分割的元素。第二个参数是一个配置对象，包含了一些配置属性：
sizes: 设置每个元素的初始大小。minSize: 设置元素的最小宽度或高度。gutterSize: 设置拆分条的大小。
示例代码
下面是一个简单的示例，它会将页面拆分成两个部分，左侧为图像，右侧为文本，你可以对拆分条进行拖拽，从而调整图像和文本的宽度。
-- -------------------- ---- -------
--------- -----
------
------
-------------- ----------
-------
------ -
-------- -----
------- ------
-
----------- -
-------- -----
----------- -----------
--------- -----
-
----------------------- -
----------- ----------------------------------------- --------- ------ -------------
---------- ------
-
--------
-------
------
---- --------------
---- -------------------------
---- -------------------
----------------
----------------
------
------
------- -----------------------------------------------------------
--------
--------------------- --------------- -
------ ---- ----
-------- ----- -----
----------- --
--
---------
-------
-------总结
使用 splitjs 包可以很方便地将页面分成两个独立的部分，并且能够支持拖拽调整宽度，同时还提供了许多配置选项，可以满足不同需求。希望本文能够对大家有帮助，并且能够在实际开发中应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a58ccae46eb111f195