原创|进阶图（一）：主面板开发

前言

关联 原创|进阶图（二）：关联资料和缩放支持设计

本文介绍原创作品，进阶图的开发过程和开发思路，以及用到的关键技术点，并给出相应的 demo 示例。

进阶图，是指用来表达阶梯性递增行为的图形，通常可用于职业职级、学历、风险等级等具有阶梯递增或递减特征的场景。

如下是效果示意图。

实现思路分析

1.遍历生成阶梯主面板。

写好一个阶梯，编写样式，通过遍历生成N个阶梯，这样就形成了基本的阶梯主面板。

阶梯主面板的结构代码

2.开发右键菜单。

给每一个节点，包括一级阶梯节点，二级子节点，三级文本行节点， 绑定 @contextmenu.prevent.stop 事件， 不同级别节点通过传递 type 参数识别。 编写右键菜单结构和样式，运用 $event.screenX 和$event.screenY 的位置信息， 结合 position: fixed 固定定位实现菜单跟随鼠标。

右键菜单事件函数：

右键菜单结构

 <!-- 右键菜单 -->
<div ref="menuPanel">
    <ul v-if="showMenu" class="menuPanel" :style="{top:menuTop,left:menuRight}">
        <i class="el-icon-close" @click.stop="showMenu=false"></i>
        <li @click.stop="addItem('after')">{{ buttonTextAfter }}</li>
        <li @click.stop="addItem('before')">{{ buttonTextBefore }}</li>
        <li @click.stop="deleteItem()">{{ buttonTextDelete }}</li>
    </ul>
</div>

右键菜单事件函数

rightClick (item, $event, type, parentItem) {
  if (this.type === 'detail') return
  this.menuRight = $event.screenX + 'px'
  this.menuTop = $event.screenY - 50 + 'px'
  this.showMenu = true
  this.currentItem = item
  this.parentItem = parentItem
  this.rightType = type
}

3.实现对各级节点的增删

通过 @contextmenu.prevent.stop 绑定的 rightClick 事件，item, $event, type, parentItem 四个参数， 可以识别弹起的右键菜单属于哪级节点，从而展示不同的菜单文本，并实现准确对各级节点的增删操作。

①item:该节点信息，例如 uuid，文本内容等。

②$event：事件信息，比如当前鼠标的位置信息$event.screenX 和 $event.screenY。

③type：节点类型，用于判断属于哪个级别的节点，以便处理不同的事情。

④parentItem：父节点信息，主要用于增加或删除操作。例如当前节点的父节点增加子节点，或删除当前节点。 此时巧妙利用数组方法 splice 的第一个参数，结合当前节点的下标，实现向前还是向后增加节点。

各级节点的增删函数如下

4.开发右侧抽屉，实现对单击文本的修改。

通过给每个节点的文本绑定单击事件 clickNodeLabel，获取当前节点信息，包括文本信息， 赋值到 data 中声明的 form，并打开抽屉关联数据，从而达到数据绑定和更新的效果。

单击文本事件函数

    // 单击节点文本
    clickNodeLabel (item) {
      if (this.type === 'detail') {
        this.$emit('getNode', item)
        return
      }
      this.form = item
      this.drawer = true
      this.searchList()
    },

抽屉结构

5.监听两个数据

①监听主面板数据 list，以便实现即时改变进阶图容器的 width，从而避免容器 width 过小阅读不便。

②监听父组件传递下来的主面板数据 progressData，这会发生在面板组件被调用时。 该监听主要是为了确保面板组件的调用者定义的面板数据，能被及时准确更新到面板中。

监听代码

watch: {
    'list': {
      deep: true,
      handler (newVal, oldVal) {
        this.bodyWidth = this.list.length * 392 + 60 + 'px'
        this.$emit('change', this.bodyWidth, this.list)
      }
    },
    'progressData': {
      handler (newVal, oldVal) {
        this.list = newVal
      }
    }
  },