乐趣区

关于vue.js:开源一个-vue-版的脑图编辑器数据上已兼容-agiletc-的测试结果格式

jiezi

原文由 陈恒捷 发表于 TesterHome 社区网站，原文链接

背景

因为公司测试平台前端框架用的是 vue，且年初 agiletc 还不反对百度脑图原生反对的从 xmind 复制粘贴至脑图组件，快捷键也不够好用，且前端组件没开源。因而基于社区内其余已有的开源脑图组件，再仿照 agiletc 的脑图组件包了一层。

很早就确认了能够开源，但始终有别的事件忙没空弄。刚好这周末又有同学私聊我，所以花了点工夫把公司私库相干信息改为内部 npm 的，进行开源。

反对性能：

1、百度脑图原有性能（节点编辑、优先级设置、自定义标签设置）
2、测试后果注销 ，数据格式和 agiletc 现有脑图组件的格局统一，即能够间接正确展现和编辑现有 agiletc 自带编辑器设置的测试后果
3、 以后选中节点个数统计，在顶部标题栏加了个以后选中节点个数统计数据的文字

相比 agiletc 少了的性能：

1、脑图自身自带的导入导出性能（agiletc 服务端有提供，所以前端就不提供了）
2、增加图片（百度脑图自身就没有）
3、实时上报及更新脑图数据

在此特别感谢 fudax、MeYoung 两位前辈的开源奉献，我只是站在大家的肩膀上补充了一些边角性能而已

开源地址

https://github.com/chenhengjie123/vue-testcase-minder-editor

成果

[](https://testerhome.com/upload…!large)

也能够本地跑起来体验，克隆完代码后，在根目录下：

# 装置依赖
npm --registry=https://registry.npm.taobao.org install

# 本地运行
npm run lib && npm run serve

运行后，依照提醒的地址关上即可，例如

App running at:
- Local:   http://localhost:8081

示意通过 http://localhost:8081 能够关上

我的项目中应用

装置本组件

npm --registry=https://registry.npm.taobao.org install vue-testcase-minder-editor

在 main.js 中

import 'vue-testcase-minder-editor/lib/VueTestcaseMinderEditor.css'
import VueTestcaseMinderEditor from 'vue-testcase-minder-editor'

Vue.use(VueTestcaseMinderEditor)

本组件依赖 vuex 进行局部全局配置管理。如果没有用 vuex，可间接在 main.js 退出上面代码。

Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {caseEditorStore: VueTestcaseMinderEditor.caseEditorStore}
})

如果有，能够仿照上面代码，动静注册对应 module

const store = new Vuex.Store({...})

// 动静注册用例编辑器我的项目的 store 模块到我的项目中
store.registerModule('caseEditorStore', {...VueTestcaseMinderEditor.caseEditorStore})

在页面的 .vue 文件中

<template>
    <VueTestcaseMinderEditor 
      :initJson="initJson"  // 初始化数据，加载脑图时自动更新。同时也会监听数据变动，数据一更新就从新加载
      ref="minderEditor"    // 组件利用名称
      :allowEditPriority="true"  // 是否容许增删改优先级，实时更新状态
      :allowEditLabel="true"     // 是否容许增删改标签，实时更新状态
      :allowEditResult="true"    // 是否容许增删改测试后果，实时更新状态
      :allowEditNode="true">     // 是否容许增删改节点内容，实时更新状态
    </VueTestcaseMinderEditor>
</template>
...

<scripts>

export default {

  ...

  data() {
    return {
      // 测试数据，理论可不用引入
      initJson: {
          'data': {
            'id': 2,
            'text': 'Design project',
            'image': 'https://testerhome.com/uploads/user/avatar/6109.jpg',
            'imageSize': {'width': 200, 'height': 200}
          }
      }
    }
  },
  methods: {
    // 示例办法，理论可依据须要绑定到其余元素事件中，比方 v-on:click="logCurrentData"
    logCurrentData: function(event) {console.log("编辑器中的最新用例内容：", this.$refs.minderEditor.getJsonData())
    }
  }
}
<scripts>

残缺示例可查看 examples 上面的 2 个文件

更多信息

更多信息，请查看 https://github.com/chenhengjie123/vue-testcase-minder-editor

最初

有些 eslint 之类的问题因为自身原有代码就有比拟多问题，不影响性能但会有一堆红线。修复起来比拟耗时所以临时没动，请大家见谅。

如果代码方面有什么优化倡议，也欢送提出，甚至间接提 PR 优化哈！

播种前沿测试开发技术 · 学习先进品质治理办法 · 结识测试大咖行业精英

退出移动版