Element Plus源码解析

Tree树组件设计思想

1.1 ui组件设计

tree.vue组件，入口文件，遍历循环（tree-node.vue）树的每个节点；

tree-node.vue组件，每个节点的内容渲染和处理绑定节点的各种操作事件，比如，节点的选择、拖拽、展开、收起、是否禁用等等节点的交互事件；

简单描述：创建一个总的入口文件，用于实例化treeData和遍历树的单个节点；再创建一个文件用于生成单个节点，并绑定节点的各种操作事件。

1.2 数据模型设计(model层设计)

有两个关键类文件，tree-store.ts和node.ts，tree-store.ts文件存储树操作时的公共数据，以及维护这些数据的操作方法，node.ts实例化每个树节点和节点的操作方法（如：节点的增删改数据等等）。

入口tree.vue初始化一个公共的store实例，用于存储交互数据；然后调用store的initialize方法初始化一个树的根节点root（new一个Node实例）；再调用root节点的initialize方法进行节点注册（树结构平铺之后的节点注册，放在store.nodesMap中的），为根节点添加Node实例数据（先调用setData方法，在调用insertChild方法，最后new Node(child)实例，递归这整个过程，遍历实例化每个子节点），整棵树的数据初始化就完成了（简单描述：创建一个store实例用于存储临时数据，树的每个节点都进行实例化，把父节点和store节点都挂载在那个Node实例上，操作的时候直接调用Node实例上的方法，这样不需要操作节点时重新查找父节点）。

1.3  总结

首先创建两个vue文件，一个用于总的入口文件，用于实例化treeData和遍历树的单个节点，另一个用于生成单个节点，绑定节点的各种操作事件。

然后创建两个关键类，tree-store.ts和node.ts，tree-store.ts文件存储树操作时的公共数据，以及维护这些数据的操作方法，node.ts实例化每个树节点和节点的操作方法（如：节点的增删改数据等等）。

最后是整体的业务实现思想，创建一个store实例用于存储临时数据，树的每个节点都进行实例化，把父节点和store节点都挂载在那个Node实例上，操作的时候直接调用Node实例上的方法，这样不需要操作节点时重新查找父节点。

Dialog组件

1.1 整体设计思想

        <teleport>用于判断是否追加到body；

        el-overlay：有一点是创建了个div，铺满整个浏览器，固定定位到最上层，内容居中，不知道还有没有其它功能；

        div（className：el-overlay-dialog）：处理点击内容区域外关闭弹窗；

        el-focus-trap：fouce-trap.vue中template只用了一个slot，传递了一个键盘按下事件方法。用来注册和处理内容区域内的事件，如：按tab键时切换内容区域按钮选中状态；

        el-dialog-content：用于渲染弹窗内的内容；

概述：最外层用一个div固定定位铺满整个浏览器；里面一层div用于处理弹窗相关的事件处理（最终在hook函数中实现的此功能）；再里面一层div，处理弹窗键盘事件；最里层渲染弹窗内容。

整体设计结构：dialog.vue是入口，内部使用了hook（重点是use-dialog.ts）实现接近所有的业务。与dialog.vue同级的还有个dialog.ts文件，用于处理el-dialog组件使用时可接收的属性和方法。

对hook的理解：hook可以定义为单独的ts文件，可以在文件中引用vue框架的方法(比如：script  setup中可以使用的在这也能使用，只不过一般setup的return返回的是一个对象，对象中包含的变量名和方法名)；这样的好处：不需要在vue文件中实现大量的业务逻辑，可以把一下比较独立的点抽离出来。在hook中还能获取到使用组件的实例，可以在hook中使用组件生命周期等等。

hook案例：在dialog.vue文件中的script开始处导入了use-dialog.ts（这是一个hook），分别在两个文件中都可以加入生命周期钩子函数，运行的时候也会同时被触发，use-dialog.ts中的钩子运行到import导入的时候就会被执行(onMounted为例)。

1.2 弹窗拖拽实现

在drag-content.vue组件中调用hook（use-draggable.ts中的useDraggable）中的方法进行事件初始化。

在use-draggable.ts的onMountes中判断是否开启了拖拽功能：

        未开启的话，直接从目标元素上移除mousedown事件；

        开启了的话，给目标元素绑定mousedown事件(绑定方法名handleMousedown)，在handleMousedown()中给document绑定mousemove和mouseup事件。

mousemove中动态计算位置并更新css，mouseup中移除mousemove和mouseup；

onBeforeUnmount生命周期钩子中，移除mousedown事件。

简单概况：在弹窗内容组件调用hook初始化事件，在hook的mounted周期中判断是否开启了拖拽行为，未开启移除mousedown事件；开启了则给目标元素绑定mousedown事件，在这个事件中给document绑定mousemove（位置计算更新）和mouseup（移除document上的两事件）。最后销毁前移除mousedown事件。