vue传送门组件实现分类树的聚焦编辑

大家好！咱们已经学习过了spring boot小卷生鲜电商项目实战中商品分类的后台接口开发，再借助咱们前面介绍的juan-admin后台管理平台来开发商品分类树组件，就可以实现前后端的交互啦！在实现前端组件开发与后台接口对接的过程中，小卷会以把每个知识点拆解开来，单独成篇的介绍其在实际项目中的应用，让小伙伴们每天收获多一点点。

传送门组件Teleport

所谓的传送门组件------Teleport，就是用户只用关心vue html模板中的数据绑定以及事件等操作，而html内容的渲染结果可以通过一个传送门组件"传送"到其他的html容器元素内。通过它我们可以实现基于数据模型渲染出来的html内容的移动。

Vue3中提供的传送门Teleport组件API的使用，小伙伴们可以参考官方文档 - Teleport。

demo演示

除了官方的遮罩层的demo外，我们主要来看下传送门组件在咱们电商后台商品分类树的高亮编辑，先看下实现的效果：

再切换到暗黑模式下来看看效果：

在编辑分类树中一个节点名称的时候，整个树用一个遮罩层，而惟独这个编辑区域不遮盖，可以操作，以达到高亮聚焦的效果。

实现思路

现在，小伙伴们知道了传送门组件的作用，结合我们上面实现的demo，咱们一起来理一理具体的实现思路，看到渲染出来的html内容（这里为方便看，手动删除了部分分类html内容）：

当点击编辑后，再看看html内容：

很显然，原先新鲜水果这一个条目的html内容根据数据状态的改变而进行了视图的刷新，通过传送门技术将内容从原来的区域挪到了与外层遮罩层div元素同级的<div class="item-edit-cont"></div>元素中了。

而要让编辑状态下的分类条目在页面上看起来依然处于原来的位置，即纹丝不动，只是内层多了一层蒙版把整棵树给盖住了，而自身位于蒙版之上，以达到被聚焦的效果，最主要的问题就是如何获取被点击条目原来位于tree容器中的相对定位以及初始的宽度。

这里我们使用了原生dom元素提供的相关api来实现的：

js 复制代码

const calcEditInfo = id => {
  const itemCont = document.querySelector('.category-tree-cont #item-cont-' + id)
  const rect = itemCont.getBoundingClientRect()
  const rectTree = document.querySelector('.category-tree-cont').getBoundingClientRect()
  editModel.value = {
    top: rect.top - rectTree.top,
    left: rect.left - rectTree.left,
    width: itemCont.clientWidth
  }
}

通过它们的getBoundingClientRect()方法来获取其客户端模型的位置信息，相减从而得到其相对位置。

剩下的咱们就用vue3中数据双向绑定机制，基于编辑状态来刷新蒙版和传送放置容器的激活样式即可：

vue 复制代码

<div class="mask" :class="{active: editing}"></div>
<div class="item-edit-cont" :class="{active: editing}" :style="{ width: editModel.width + 'px', top: editModel.top + 'px', left: editModel.left + 'px' }"></div>

通过这样的思路点拨，相信小伙伴们在今后的前端学习实践中遇到类似的需要对容器中部分元素进行聚焦编辑时，可以来参考下即可，可不要忘了点赞和收藏哈，大家加油！