vue实现公式编辑器组件

实现方式一

1、效果图

2、实现代码 

组件弹框实现 样式自己调整  公式的数字与汉字元素、符号 建立元素表 动态获取

完整代码（calculate.vue）

在父组件中引用即可

实现方式二

 1、效果图

2、实现代码

    
      
        
          
            
              


                
                  
                    {{tag.dictLabel}}
                  
                
              
            
          
          
        
        
          
            
              

                
                  
                    {{tag.dictLabel}}
                  
                
              
            
          
          
        
        
          
            
              

                
                  
                    {{tag.dictLabel}}
                  
                
              
            
          
          
        

        
          
            
              

                
                  
                    {{tag.dictLabel}}
                  
                

                
                  
                
              
            
          
          
            

              {{explain}}
            
          
        
      
      

        保 存
        取 消
      
    

js方法

import draggable from 'vuedraggable'

​​​​​​​

watch: {
      'resultR': {
        handler: function () {
          this.refreshFormula();
        }
      },
    },
    methods: {
      log() {
        this.refreshFormula();
      },
      refreshFormula() {
        this.previewFormula = "";
        if (this.resultR !== undefined && this.resultR !== null && this.resultR !== []) {
          for (let i = 0; i < this.resultR.length; i++) {
            this.previewFormula += this.resultR[i].dictLabel;
          }
        }
        console.log("this.previewFormula")
        console.log(this.previewFormula)
      },
handleDrag(item) {
        indexList({ "factory": item.factory }).then(resp => {
          this.indexLists = resp.data;
          this.resultFormula = this.form.indicatorFormula
          if (typeof this.resultFormula !== 'undefined' && this.resultFormula.length > 0) {
            const strArr = this.resultFormula.split(',')
            this.resultR = [];
            for (let i = 0; i < strArr.length; i++) {
              let indexBoolean = false
              for (let j = 0; j < this.indexLists.length; j++) {
                if (this.indexLists[j].dictValue === strArr[i]) {
                  this.resultR.push(this.indexLists[j]);
                  indexBoolean = true
                }
              }
              if (!indexBoolean) {
                let opBoolean = false
                for (let z = 0; z < this.operatorOptions.length; z++) {
                  if (this.operatorOptions[z].dictValue === strArr[i]) {
                    this.resultR.push(this.operatorOptions[z]);
                    opBoolean = true
                  }
                }
                if (!opBoolean) {
                  for (let c = 0; c < this.nums.length; c++) {
                    if (this.nums[c].dictValue === strArr[i]) {
                      this.resultR.push(this.nums[c]);
                    }
                  }
                }
              }

            }
          }
          this.dragOpen = true;
        })
      },
      submitDrag() {
        console.log(this.resultR)
        this.resultFormula = ''
        for (let i = 0; i < this.resultR.length; i++) {
          this.resultFormula = this.resultFormula + this.resultR[i].dictValue + ","
        }
        this.$set(this.form, 'indicatorFormula', this.resultFormula.substring(0, this.resultFormula.length - 1));
        this.dragOpen = false;
        this.resultR = [];
        this.previewFormula = '';
      },
      cancelDrag() {
        this.dragOpen = false;
        this.previewFormula = '';
      },
      tagClick(item) {

      },
      handleClose(item) {
        this.resultR.splice(this.resultR.findIndex(i => i.dictValue === item.dictValue), 1);
      },
}

css代码