DbPtZn / dnptzn-components

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue 3 + TypeScript + Vite

使用 vue 递归组件制作的布局容器组件,不知道怎么称呼比较好,先叫分形容器组件吧。

这个分形组件想要解决的问题:

  1. 我开发产品过程中遇到需要拖拽分隔条调整容器宽高的问题,每次都要单独去实现这个功能十分麻烦,所以我想着把它做成外部容器的固有能力。
  2. 我见识过一些产品,它们的扩展能力很强,支持他人开发插件,布局变化十分自由,所以我在尝试探索如何做出这样的产品。布局容器是第一步。

Demo

仓库是我制作的一个简易 Demo,直接 npm install 安装依赖, npm run dev 应该就可以跑起来。

fractal-container 分形容器

这是我第一次用 vue3 写递归组件,递归组件的很多行为跟普通组件不一样,网络的相关教程也不全面,所以一路磕磕绊绊,好在最后还是撸出来了。

这个分形容器主要困难有两点:

  1. 如何分隔条实现 resize 调整容器宽高?一开始我用 dom 的思维完全找不到门路,后来换成数据驱动就有办法解决了,实现基本思路也写在代码注释里了,但算法只是我磕磕绊绊摸索出来的,用是应该没问题,但还不成熟。
  2. 如何实现容器之间的拖拽移动、替换?这个其实也不算难,就是略微繁琐再加上我对 vue 组件的底层实现不熟悉。在移动节点时往往会产生一些垃圾节点,这些问题也得想办法去处理。

未解决的问题:

  1. 移动节点时离开原层级时,节点的 dom 就会重新渲染。这可能不是我们期望看到的,限于我当前的知识水平,暂时没啥办法解决。

声明:

  1. 该组件并不成熟,请不要直接使用到你的项目中,如果你想用,或许可以参考一下自己再实现一遍,这样你知道该组件存在哪些问题。
  2. 编写该组件的时候我在自己的项目中简单测试过,但现在为了开源这个组件我又重构了,重构之后还没有测试过,后续我会在自己的项目中实际使用并持续优化更新。

ps: 你可以用 npm i @dbptzn/fractal-container 在你自己的项目中安装使用,能用是能用,但现在最好不要这么做,因为我对打包发布还不熟悉,后续会持续优化。

About


Languages

Language:Vue 58.2%Language:TypeScript 41.3%Language:HTML 0.5%