Formula-editor-vue NPM

formula-editor-vue

Vue 公式编辑器

install

npm install -save formula-editor-vue

局部注册

<script>
import { FormulaEditor } from "formula-editor-vue";
import "formula-editor-vue/dist/index.css";
export default {
  components: {
    FormulaEditor,
  },
};
</script>

获取已编辑的公式

<template>
  <div>
    <button @click="handleGetFormula">获取公式</button>
    <FormulaEditor ref="editor" />
  </div>
</template>
<script>
import { FormulaEditor } from "formula-editor-vue";
import "formula-editor-vue/dist/index.css";
export default {
  components: {
    FormulaEditor,
  },
  methods: {
    async handleGetFormula() {
      try {
        const res = await this.$refs.editor.getFormula();
        console.log(res, "-=-=");
      } catch (err) {
        console.log(`公式错误了：${err}`);
      }
    },
  },
};
</script>

插入字段

<template>
  <div>
    <ul>
      <li
        v-for="item in fields"
        :key="item.key"
        @click="handleInsertField(item)"
      ></li>
    </ul>
    <FormulaEditor ref="editor" />
  </div>
</template>
<script>
import { FormulaEditor } from "formula-editor-vue";
import "formula-editor-vue/dist/index.css";
export default {
  components: {
    FormulaEditor,
  },
  data() {
    return {
      fields: [
        {
          key: "1",
          text: "A1",
        },
        {
          key: "2",
          text: "A2",
        },
        {
          key: "3",
          text: "A3",
        },
      ],
    };
  },
  methods: {
    handleInsertField(data) {
      this.$refs.editor.insert({ ...data, type: "field" });
    },
  },
};
</script>

插入函数

<template>
  <div>
    <ul>
      <li
        v-for="item in functions"
        :key="item.key"
        @click="handleInsertFn(item)"
      ></li>
    </ul>
    <FormulaEditor ref="editor" />
  </div>
</template>
<script>
import { FormulaEditor } from "formula-editor-vue";
import "formula-editor-vue/dist/index.css";
export default {
  components: {
    FormulaEditor,
  },
  data() {
    return {
      functions: [
        {
          key: "max",
          text: "max()",
        },
        {
          key: "min",
          text: "min()",
        },
      ],
    };
  },
  methods: {
    handleInsertFn(data) {
      this.$refs.editor.insert({ ...data, type: "fn" });
    },
  },
};
</script>

插入其他

<template>
  <div>
    <ul>
      <li
        v-for="item in functions"
        :key="item.key"
        @click="handleInsertOther(item)"
      ></li>
    </ul>
    <FormulaEditor ref="editor" />
  </div>
</template>
<script>
import { FormulaEditor } from "formula-editor-vue";
import "formula-editor-vue/dist/index.css";
export default {
  components: {
    FormulaEditor,
  },
  data() {
    return {
      functions: [
        {
          key: 1,
          text: "1",
        },
        {
          key: 2,
          text: "2",
        },
      ],
    };
  },
  methods: {
    handleInsertOther(data) {
      this.$refs.editor.insert({ ...data, type: "other" });
    },
  },
};
</script>