formula-editor-vue3

Formula Editor for Vue3 Built with vue-codemirror + codemirror6

Install

npm install formula-editor-vue3 --save

Usage

main.ts

import { createApp } from 'vue'

import App from './App.vue'

import FormulaEditor from 'formula-editor-vue3'
import 'formula-editor-vue3/dist/style.css'

const app = createApp(App)

app.use(FormulaEditor)

app.mount('#app')

tsconfig.json

{
  "compilerOptions": {
    "types": ["formula-editor-vue3/type"]
  }
}

*.vue

<template>
  <div style="margin: 10px">
    <input type="text" readonly v-model="result" />
    <button @click="getResult">获取结果</button>
  </div>
  <formula-editor v-model="code" :variables="variables" />
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'

  import { evalFormula, type VariableItem } from 'formula-editor-vue3'

  const variables = ref<VariableItem[]>([])

  const code = ref('${d2345678} + 2 + SUM(${d2345678}, 2)')

  const result = ref('')

  const getResult = () => {
    const data = {
      d2345678: 1
    }
    try {
      // 使用eval来进行计算获取结果，通过处理变量来获取再data中的值，然后进行计算
      result.value = evalFormula(
        code.value,
        variable => {
          return `['${variable}']`
        },
        data
      )
    } catch (error) {
      console.error('formula error >>>', error)
    }
  }

  onMounted(() => {
    variables.value = [
      {
        label: '单行文本',
        value: 'd2345678',
        desc: '字符串'
      }
    ]
  })
</script>

*.vue use slot

<template>
  <div style="margin: 10px">
    <input
      type="text"
      readonly
      v-model="customResult"
      placeholder="输出结果"
      class="result-input"
    />
    <button @click="getCustomResult" style="margin-left: 10px" class="result-btn">
      获取自定义结果
    </button>
  </div>
  <formula-editor
    v-model="customCode"
    :title="'自定义计算MATHS'"
    :variables="customVariables"
    :math-list="customMathList"
  >
    <template #variable="{ insert }">
      <ul class="custom-variables-list">
        <li v-for="item in customVariables" :key="item.value" @click="insert(item.value)">
          {{ item.label }}
        </li>
      </ul>
    </template>
    <template #math="{ insert }">
      <ul class="custom-maths-list">
        <li v-for="item in customMathList" :key="item.name" @click="insert(item.name)">
          {{ item.name }}
        </li>
      </ul>
    </template>
  </formula-editor>
</template>
<script setup lang="ts">
  const customVariables = ref<VariableItem[]>([
    {
      label: '当前日期',
      value: 'd1345678'
    }
  ])
  const customCode = ref('GET_DATE(${d1345678})')
  const customResult = ref('')
  const customMathList = ref<MathItem[]>([
    {
      name: 'GET_DATE',
      handler: date => {
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
      }
    }
  ])

  const getCustomResult = () => {
    const data = {
      d1345678: new Date('2024-12-01')
    }
    try {
      customResult.value = evalFormula(
        customCode.value,
        text => {
          return `['${text}']`
        },
        data,
        customMathList.value
      )
    } catch (error) {
      console.error('formula error >>>', error)
    }
  }
</script>

Props

Prop	Type	Default	Description	Required
title	string	''	title	false
isDark	boolean	false	one dark theme	false
disabled	boolean	false	disabled	false
height	number	200	editor height	false
placeholder	string	''	editor placeholder	false
variables	VariableItem	[]	variables for formula	false
mathList	MathItem	FORMULA_MATHS	math list for formula	false

Slots

Slot Name	props	type	Description
math	insert	(mathName:string)=> void	insert math formula
variable	insert	(varName:string)=> void	insert variable formula