前端數學公式自定義編輯

界面

可自定義未知數、運算符號、函數

自己寫的一個數學公式簡單編輯器，本想找開源，無奈找不到。如果有開源，請發我一份，參考參考。在此感謝。

靜態

1、簡單公式：例如 x + y

將公式中的變量（x,y）以及運算符(+,-)放在一個數組中，遍歷這個這個數組組成一個 html 字符串，然后顯示在頁面。
數組定義為：

type 定義是值還是運算符

valueDatas: [{type: 'value',domType:'value',value: 'x',className: 'input-value'},{type: 'operator',domType:'operator',value: '+',className: 'input-value'},{type: 'value',domType:'value',value: 'y',className: 'input-value'}]

2、加了括號：例如 x + y + （x + y）

加了括號之后，按照上文數組邏輯，那數組將會變成：

valueDatas: [{type: 'value',domType:'value',value: 'x',className: 'input-value'},{type: 'operator',domType:'operator',value: '+',className: 'input-value'},{type: 'value',domType:'value',value: 'y',className: 'input-value'},{type: 'operator',domType:'operator',value: '+',className: 'input-value'},{type: 'operator',domType:'operator',value: '(',className: 'input-value'},{type: 'value',domType:'value',value: 'x',className: 'input-value'},{type: 'operator',domType:'operator',value: '+',className: 'input-value'},{type: 'value',domType:'value',value: 'y',className: 'input-value'},{type: 'operator',domType:'operator',value: ')',className: 'input-value'},]

沒加一個括號，數組中就加兩個對象，這樣如果括號很多的情況下，數組會很大，而后面操作處理的時候也比較麻煩。
于是想到了，用樹形數據去拼接HTML字符串，數組添加parentId 以及 domid。
數組：

[{ domid: "7138db29-896c-42da-8e0f-0dbc3a3299ef",type: 'variate',domType:'variate',value: '',className: 'input-div'},{domid: "aa447ece-1b03-42cc-9199-adc924ea7271",type: 'value',domType:'value',value: 'x',parentId: "7138db29-896c-42da-8e0f-0dbc3a3299ef",className: 'input-value'},{domid: "07872aaf-0bb0-4f7e-9b40-ef78b6e95ed1",type: 'operator',domType:'operator',value: '+',parentId: "7138db29-896c-42da-8e0f-0dbc3a3299ef",className: 'input-value'},{domid: "07872aaf-0bb0-4f7e-9b40-ef78b6e95ed3",type: 'bracket',domType:'bracket',value: '',parentId: "7138db29-896c-42da-8e0f-0dbc3a3299ef",className: 'input-value input-bracket input-default-bracket'},{domid: "07872aaf-0bb0-4f7e-9b40-ef78b6e95ed4",type: 'value',domType:'value',value: 'n',parentId: "07872aaf-0bb0-4f7e-9b40-ef78b6e95ed3",className: 'input-value'},]

樹結構：

[ {"domid": "7138db29-896c-42da-8e0f-0dbc3a3299ef","type": "variate","domType": "variate","value": "","className": "input-div","components": [{"domid": "aa447ece-1b03-42cc-9199-adc924ea7271","type": "value","domType": "value","value": "x","parentId": "7138db29-896c-42da-8e0f-0dbc3a3299ef","className": "input-value"},{"domid": "07872aaf-0bb0-4f7e-9b40-ef78b6e95ed1","type": "operator","domType": "operator","value": "+","parentId": "7138db29-896c-42da-8e0f-0dbc3a3299ef","className": "input-value"},{"domid": "07872aaf-0bb0-4f7e-9b40-ef78b6e95ed3","type": "bracket","domType": "bracket","value": "","parentId": "7138db29-896c-42da-8e0f-0dbc3a3299ef","className": "input-value input-bracket input-default-bracket","components": [{"domid": "07872aaf-0bb0-4f7e-9b40-ef78b6e95ed4","type": "value","domType": "value","value": "n","parentId": "07872aaf-0bb0-4f7e-9b40-ef78b6e95ed3","className": "input-value"}]}]}]

公式中括號（）則用css 偽元素顯示：

.input-bracket:before {display: inline-block;width: 5px;content: '(';vertical-align: top;}.input-default-bracket:after {display: inline-block;width: 5px;content: ')';vertical-align: top;}

最后使用遞歸拼接html，并且把父級ID,自身Id 加上。

動態

通過靜態公式顯示，動態公式主要是實現公式添加變量、運行等。

1、將變量、運算符、括號等用一個對象數據存儲。格式如下： 用 type區分。

[{type:'value',domType:'X',className: 'input-value',value} ]

將數組遍歷，在頁面顯示，給用戶操作公式。

2.添加光標，既然可以編輯，用一個光標提示用戶此時編輯的哪個地方。

光標也是用一個加了動畫的div顯示，在遞歸拼接HTML中加上這個div即可，此時光標div也得加上父級id,前后元素的id，方便刪除、添加時使用。

.input-cursor-div {min-width: 10px;height: 80px;display: inline-block;cursor: pointer;text-align: center;}.input-cursor-div:hover {background: #0000FF;}.input-cursor-active {animation:cursorActive 1s infinite alternate;}@keyframes cursorActive{0% {opacity: 1;background: blueviolet;}100% {opacity: 0;background: darkblue;}}

3、刪除一個元素、添加一個元素

刪除事件處理則是根據光標所在位置，將光標div的前一個div刪掉，此時存在另外兩種情況

第一種 ：前一個div時屬于括號級別的要把括號里面的數據全部刪除

第二種: 光標處于括號內，刪除的時候也將括號級別的數據全部刪除。
添加事件，則是將變量、運算符以及括號等div插入光標，并且根據光標的添加的domid，判斷放在數組哪個位置

4、添加拖拽

使用 mousedown、mouseup、mousemove，將變量、運算符以及括號等div放在光標之上，然后調用添加方法即可實現。

完結。大概思路。

代碼地址

總結

以上是生活随笔為你收集整理的VUE + Jquery 集成的一个简易数学公式编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。