vue-formula-editor

⚠️ 注意：目前仅支持 Vue2

安装

$ npm i vue-formula-editor -S

example地址

在线体验

demo & 源码

使用方式

import { calculate, formulaWatcher, FormulaEditor } from 'vue-formula-editor'

主要导出三个对象

• calculate计算结果函数
• formulaWatcher自动监听表单变化计算结果
• FormulaEditor组件

FormulaEditor组件 Props 参数说明

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------- | --------------------- | ------ | ------ | ------ | | fieldList | 表单字段 | Array | 必填 | - | | formulaList | 公式函数列表 | Array | 必填 | - | | formulaConf | 公式编辑配置 / 回显值 | Object | 必填 | - |

fieldList 数据格式

[
  {
    fullName: '名称',
    value: 'string',
    enCode: 'name',
  },
]

formulaList 数据格式

[
  {
    name: '常用函数',
    enCode: 'frequentlyUse',
    formula: [
      {
        name: 'SUM',
        enCode: 'SUM',
        tip: '求和',
        example: 'SUM(数学成绩,语文成绩,英语成绩,...) = 各科总成绩',
        usage: 'SUM(数值1,数值2,...)。',
      },
    ],
  },
]

formulaConf 数据格式

其中 marks 为可选参数，因为不一定有变量参与计算

{
    "text": "CONCATENATE(名称,描述)",
    "marks": [{
            "from": {
                "line": 0,
                "ch": 12
            },
            "to": {
                "line": 0,
                "ch": 14
            },
            "enCode": "name"
        },
        {
            "from": {
                "line": 0,
                "ch": 15,
                "sticky": null
            },
            "to": {
                "line": 0,
                "ch": 17,
                "sticky": null
            },
            "enCode": "desc"
        }
    ]
}

FormulaEditor组件 Methods 方法说明

| 方法名 | 说明 | 参数 | | ------- | ---------------- | ---- | | getData | 获取公式编辑配置 | 无 | | reset | 重置公式编辑器 | 无 |

自动监听数据变化 - formulaWatcher

自动监听数据变化，并实时计算结果

formulaWatcher Params 参数说明

| 参数 | 说明 | | ----------- | ----------------------------------------------------------- | | vm | 当前 Vue 实例 | | formData | 计算公式所需的数据； key：监听的名称、value：监听的表单数据 | | formulaConf | 计算公式配置 | | fn | 回调函数 |

使用示例

/**
 * 动态监听并返回计算结果
 * @param {VueContentInstance} vm 当前Vue实例
 * @param {Object} formData 计算公式所需的数据
 * @param {Object} formulaConf 计算公式配置
 * @param {Function} fn 回调函数
 * @returns {Function} 取消监听函数
 */
this.watchData = formulaWatcher(
  this,
  { key: 'formData', value: this.formData },
  this.formulaConf,
  data => {
    this.result = data
  }
)

计算结果方法 - calculate

/**
 * 计算公式结果
 * @param {Object} formulaConf 计算公式配置 
 */
this.result = calculate({
  text: 'SUM(1,2,3,4,5,6,7,8,9,10)',
})