基于vue实现拖拽操作方式：基于Vue23

基于vue实现拖拽操作方式：基于Vue23// 预览地址 https://antoniandre.github.io/splitpanes/ // 仓库地址 https://github.com/antoniandre/splitpanesok，今天就分享到这里，感谢大家的阅读。

#头条创作挑战赛#

今天给大家分享一款超优秀的 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，今天就分享到这里，感谢大家的阅读。