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

前言

1.关联资料功能的说明

关联资料功能，主要是指每一个文本节点，添加关联资料，例如进阶图中有一个阶梯的标题“初级工程师”， 那么初级工程涉及的评审资料，都可以通过被关联上，又例如一个节点“XXX培训课程”， 那么也可以关联一些视频资料或PPT资料。这样的知识关联，便于人们查阅和深入理解。

关联资料功能，分为关联内部资料和外部资料，内部资料是指系统内已有的可通过下拉选的形式关联的， 外部资料是指系统外的需要通过手动输入的资料。

2.缩放功能的说明

缩放功能的设计，是因为有时阶梯过多，所占面积过大，想要一揽全局不变，于是设计出了可放大缩小的功能。

3.效果图

实现思路分析

1.关联入口

关联入口设计在每个节点文本的抽屉弹出层界面，分为【关联内部资料】和【关联外部资料】， 设计在此处可以很好地和关联该节点，也方便处理数据绑定。关联后的资料放在按钮下方。

关联资料注意应用数组的 Array.findIndex() 方法先进行查找，避免产生重复数据。

关联资料结构代码如下

2.关联内部资料和关联外部资料

关联内部资料首先是查询可供关联的资料，searchList() 方法查询， 获取到数据后注意关联状态的回显，以便用户能够清晰该数据是否已经被关联过。 这里是在 dealList() 中处理，通过使用map双重变遍历找出已关联项。 这主要是在换页中场景，回显关联状态。

关联资料时，应注意避免重复关联，单击关联逻辑在 clickItem() 处理，例如数组的 findIndex() 和 splice() 处理。

关联外部资料主要是输入相关说明和访问链接。

关联数据支持分页，相关代码如下

    // 接口获取可关联数据
searchList () {
  // 接口获取内部可关联的数据

  // 回显数据项的关联状态
  this.dealList()
},
// 将已被选择的用户设置为已关联状态
dealList () {
  this.options = this.options.map(e => {
    // 设置关联状态 relationStatus，已关联：1，未关联：0，默认未关联。
    e.relationStatus = e.relationStatus ? e.relationStatus : 0

    this.form.relation.map(d => {
      if (e.uuid === d.uuid) {
        e.relationStatus = 1
      }
    })
    return e
  })
},
clickSearch () {
  this.page = 1
  this.searchList()
},
pageChange (val) {
  this.page = val
  this.searchList()
},

// 单击关联项：处理关联逻辑
clickItem (item) {
  item.relationStatus = item.relationStatus ? 0 : 1
  if (!this.form.relation) {
    this.form.relation = []
  }
  const index = this.form.relation.findIndex(e => e.uuid === item.uuid)
  // 取消关联
  if (item.relationStatus !== 1) { // 取消关联时，同时删除已选择列表中的该项
    this.form.relation.splice(index, 1)
    return
  }

  // 关联资料
  if (index === -1) { // 避免重复添加
    this.form.relation.push(item)
  }
},

3.确认关联与删除关联资料

关联完毕，确认关联，将数组保存到 this.form.relation 中， 注意使用 JSON.parse(JSON.stringify(this.outItem))，以实现深拷贝，避免数据相互影响。 splice 删除关联数据后，应注意同是利用 findIndex 找到该数据项改变其关联状态。

// 关联资料
confirm () {
  this.$refs['outItem'].validate((valid) => {
    if (valid) {
      this.visible = false
      this.form.relation.push(JSON.parse(JSON.stringify(this.outItem)))
    }
  })
},
// 删除关联项
tagClose (item) {
  // 从已选择列表中删除
  const index = this.form.relation.findIndex(e => e.uuid === item.uuid)
  this.form.relation.splice(index, 1)

  // 将供选列表的【取消关联】状态改为【关联】
  const index2 = this.options.findIndex(e => e.uuid === item.uuid)
  if (index2 !== -1) {
    this.options[index2].relationStatus = 0
  }
},

4.缩放支持

这里的缩放支持主要是通过绑定样式动态改变样式，和利用 css 的 ‘transform: scale(1.8)’实现的，如下

放在计算属性中的动态样式 scaleFun

computed: {
  // 元素缩放
  scaleFun () {
    let scale = this.scale
    return `transform:scale(${scale})`
  },
},

transform 兼容性写法

.zoom-scale {
    transform: scale(1.8);
    -ms-transform: scale(1.8); /* IE 9 */
    -webkit-transform: scale(1.8); /* Safari and Chrome */
}

缩放逻辑在 zoom() 中处理如下：

// 缩放逻辑
zoom (val) {
  if (this.scale <= 0.2) return
  if (this.scale >= 2) return
  if (val === 1) {
    this.scale = 1
    return
  }
  this.scale = this.scale + val
},

5.保存进阶图为图片

转为 html 元素为图片是通过 html2canvas 插件实现的，获得图片可上传服务器。 html2canvas 的主要作用是将 html 元素转换成 canvas， 而我们再使用 canvas.toBlob 获取图片的二进制数据上传服务器。