onehr7 / formula-input

formula-input

Formula Input

公式输入框

要求能够编辑公式，需求是能够自由编辑数字和加减乘除符号，并能插入指标作为变量

开发

yarn serve

打包

yarn build

使用方法

输入框内只能输入数字及+-*/.@()，其中键入@可触发下拉筛选变量

// main.js
import FormulaInput from "@ali/formula-input"
Vue.use(FormulaInput)

// xxxPage.vue
<formula-input
  v-model="model"
  :options="options"
  :disabled="disabled"
  placeholder="placeholder"
  scrollWrapperClassName="scrollWrapperClassName"
  @change="afterChangeFunction"
></formula-input>

组件参数

参数	说明	类型	默认值
v-model	值	model	{ formula: "", vars: {} }
options	选项	options	[]
disabled	能否修改	Boolean	false
placeholder	input说明	String	""
scrollWrapperClassName	外层滚动的className,定位用	String	""

model

{
  "formula": "1+superman+2-batman+3*aquaman+4/wonderwoman",
  "vars": {
    "superman": "ClarkKent",
    "batman": "BruceWayne",
    "aquaman": "ArthurCurry",
    "wonderwoman": "DianaPrince"
  }
}

options

// example
[
  {
    "field": "superman",
    "name": "ClarkKent"
  },
  {
    "field": "batman",
    "name": "BruceWayne"
  },
  {
    "field": "theflash",
    "name": "BarryAllen"
  },
  {
    "field": "wonderwoman",
    "name": "DianaPrince"
  },
  {
    "field": "aquaman",
    "name": "ArthurCurry"
  },
  {
    "field": "cyborg",
    "name": "VictorStone"
  },
  {
    "field": "greenlantern",
    "name": "HalJordan"
  }
]

事件参数

事件	说明	类型	默认值
@change	值更改事件监听	Function	noop