vue-logic-tree

基于vue的一个逻辑展示树组件

安装

npm i vue-logic-tree

Props

属性	类型	默认值	描述
width	Number	250	容器宽度
height	Number	250	容器高度
data	Object	-	数据对象
option	Object	-	用于自定义样式
text-formatter	Function	-	用于自定义文本内容
operators	Object	参见 src/operators.js	operators 中英文对照表

tree-data的结构

每个树的结构要求如下:

{
    // 节点为逻辑符号时存在以下字段
    condition 逻辑类型
    rules 规则数组
    
    // 如果节点为规则，则存在以下字段
    type 字段类型（Number | Text | ...）
    field 字段名称
    operator 比较运算符
    value 字段值
}

基本用法

<template>
  <logic-tree :data="logicTreeData"></logic-tree>
</template>

<script>
const logicTreeData = {
  "condition": "OR",
  "rules": [
    {
      "condition": "AND",
      "rules": [
        { "type": "number", "field": "用户主动无效订单数", "operator": ">", "value": "10" },
        { "type": "number", "field": "主动无效订单数", "operator": "=", "value": "10" },
        { "type": "number", "field": "商家主动无效订单数", "operator": "<", "value": "10" },
        { "type": "number", "field": "主动无效订单数", "operator": "=", "value": "20" }
      ]
    },
    {
      "condition": "AND",
      "rules": [
        { "type": "number", "field": "用户主动无效订单数", "operator": ">", "value": "10" },
        { "type": "number", "field": "主动无效订单数", "operator": "=", "value": "10" },
        { "type": "number", "field": "商家主动无效订单数", "operator": "<", "value": "10" },
        { "type": "number", "field": "主动无效订单数", "operator": "=", "value": "20" }
      ]
    }
  ]
}

export default {
  name: 'basic',

  components: {
    LogicTree
  },

  created() {
    this.logicTreeData = logicTreeData
  }
}
</script>

自定义节点样式

通过 option 这个props自定义节点 style ，具体规则如下：

{
    logicCircle: {...} 逻辑值外面的圆的样式
    logicText: {...}   逻辑值样式
    ruleText: {...}    规则的样式
    link: {...}        连接节点的路径的样式
}

可以通过如下方式自定义节点样式：

<template>
  <logic-tree :data="logicTreeData" :option="option"></logic-tree>
</template>

<script>
const logicTreeData = {
  "type": "logic",
  "name": "或",
  "children": [
    {
      "type": "logic",
      "name": "且",
      "children": [
        { "type": "text", "name": "用户主动" },
        { "type": "text", "name": "主动无效" },
        { "type": "text", "name": "商家主动无效" },
        { "type": "text", "name": "主动无效订单" }
      ]
    },
    {
      "type": "logic",
      "name": "且",
      "children": [
        { "type": "text", "name": "用户主动" },
        { "type": "text", "name": "主动无效" },
        { "type": "text", "name": "商家主动无效" }
      ]
    }
  ]
}


export default {
  name: 'custom-style',

  components: {
    LogicTree
  },

  created() {
    this.logicTreeData = logicTreeData
    this.option = {
      logicCircle: {
        r: 9
      },
      logicText: {
        stroke: 'steelblue'
      },
      ruleText: {
        'font-size': 14
      },
      link: {
        'stroke-width': 2
      }
    }
  }
}
</script>

自定义节点显示文本

通过 text-formatter 属性向组件传递一个函数，参数是传入的数据对象 { condition: xxx, rules: [xxx] } ，如果定义了该函数，则使用该函数的返回值作为每个文本的值

<template>
  <logic-tree :data="logicTreeData" :text-formatter="d => d.condition || d.field"></logic-tree>
</template>

<script>
const logicTreeData = {
  "type": "logic",
  "name": "或",
  "children": [
    {
      "type": "logic",
      "name": "且",
      "children": [
        { "type": "text", "name": "用户主动" },
        { "type": "text", "name": "主动无效" },
        { "type": "text", "name": "商家主动无效" },
        { "type": "text", "name": "主动无效订单" }
      ]
    },
    {
      "type": "logic",
      "name": "且",
      "children": [
        { "type": "text", "name": "用户主动" },
        { "type": "text", "name": "主动无效" },
        { "type": "text", "name": "商家主动无效" }
      ]
    }
  ]
}


export default {
  name: 'custom-text',

  components: {
    LogicTree
  },

  created() {
    this.logicTreeData = logicTreeData
  }
}
</script>