#头条创作挑战赛#

今天给大家分享一款超优秀的 vue.js 拖拽拆分组件splitpanes。

split-panels 一款支持 vue2/3 简单且可触摸的窗格分离器/缩放器插件。

特征

• 重量轻，除了Vue JS外没有其他依赖项
• 只担心您的窗格，拆分器是自动的
• 支持嵌套
• 全面响应
• 支持触摸设备
• 是否推送其他窗格
• 双击拆分器以最大化窗格
• 以编程的方式设置窗格的宽度或高度
• 以编程的方式添加和删除窗格

安装

// Vue3
npm i splitpanes
// Vue2
npm i splitpanes@legacy

引入使用

// In your Vue component.
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

export default {
  components: { Splitpanes, Pane },
  ...
}

<splitpanes class="default-theme">
  <pane v-for="i in 3" :key="i">
    <div>{{ i }}</div>
  </pane>
</splitpanes>

拖拽分离非常流畅，感兴趣的小伙伴可以去看下。

// 预览地址
https://antoniandre.github.io/splitpanes/
// 仓库地址
https://github.com/antoniandre/splitpanes

ok，今天就分享到这里，感谢大家的阅读。