低代码平台工具 —— 公式编辑器

导读

公式编辑器：公式编辑用于字段值来源于其他字段或是来源于函数计算结果都可由公式编辑来完成

公式编辑器主要需要解决三件事：

• 合适的编辑器
• 强大的函数库
• 合适的事件监听

技术选型

• excel函数库 formulajs，这个函数库可以让JavaScript支持绝大部分的excel函数
• 框架React、Vue都可进行开发，这里我采用Vue2进行快速开发
• 编辑器 codemirror,定制程度高支持代码高亮、文档描述清晰，适合的公式编辑器的技术选型，因为采用Vue所以最终使用的是vue-codemirror; 不过值得注意的是，由于Vue2与Vue3的区别，vue-codemirror最终使用的是4.0.6

效果展示

案例：计算结果由Form表单中的名称和描述组成

例如：名称=张三；描述=13岁，结果显示：张三 - 13岁

步骤1 —— 公式配置

步骤2 —— 数据监听 & 自动计算结果

组件开源

本次组件也开源到了Github于npm中，欢迎前往查看Star & 讨论
demo & 源码

安装

$ npm i vue-formula-editor -S

example地址

在线体验

使用方式

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

主要导出三个对象

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

FormulaEditor组件 Props 参数说明

参数	说明	类型	可选值	默认值