1.0.0 • Published 3 years ago

@dzc/formula-edit v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

@dzc/formula-edit

react计算公式编辑器

Usage

@dzc/formula-edit

安装

npm install @dzc/formula-edit 

使用

<FormulaEdit
    theme="day" // 主题
    height={200} // 高度
    defaultValue={defaultCode} // 初始化值
    fieldList={fieldList} // @唤起
    methodList={methodList} // #唤起
    normalList={normalList} // 自定义无需校验关键词
    readOnly={false} // 是否只读
    lineNumber={true} // 是否显示列数
    onChange={getCode} // 回调
/>

fieldList 输入@符号才能调起

fieldList: [
    { name: "放款金额", value: "fkje"},
    { name: "实际放款金额", value: "sjfkje"},
    { name: "借款人姓名", value: "jkrxm"},
    { name: "借款人手机号", value: "jkrsjh"},
    { name: "借款人身份证", value: "jkrsfz"},
],

methodList 输入#符号才能调起

methodList: [
    { name: "平均值", value: "平均值(,)", realValue: "avg" },
    { name: "最大值", value: "最大值(,)", realValue: "max" },
    { name: "最小值", value: "最小值(,)", realValue: "min" },
    { name: "求和", value: "求和(,)", realValue: "sum" }
],

normalList 自定义无需校验关键词

normalList: [
    { name: "且", value: "and" },
    { name: "或", value: "or" }
],

编辑器效果

Image text Image text

props参数:

参数类型默认值是否必填说明
defaultValuestring非必填初始化赋值
heightnumber300非必填高度设置
themestringday非必填主题: 目前只支持两种:day,night
readOnlybooleanfalse非必填设置只读
lineNumberbooleanfalse非必填设置行号
fieldListarray非必填字段列表
methodListarray非必填方法列表
normalListarray非必填自定义关键词列表
onChangefunction(code, obj)非必填返回code, obj

支持ref对外暴露方法

方法类型说明
fullScreen()function全屏
exitFullScreen()function退出全屏
insertValue(value)function光标处插入值

License

MIT