vue实现四则运算封装组件

<template>
<div>
  <el-row class="tableRowAlign">
    <el-col :span="24">
      <span>指标算法：</span>
      <el-button type="primary"  @click="formulaSymbol('+',1)">+</el-button>
      <el-button type="primary"  @click="formulaSymbol('-',1)">-</el-button>
      <el-button type="primary"  @click="formulaSymbol('*',1)">*</el-button>
      <el-button type="primary"  @click="formulaSymbol('/',1)">/</el-button>
      <el-button type="primary"  @click="formulaSymbol('(',2)">(</el-button>
      <el-button type="primary"  @click="formulaSymbol(')',2)">)</el-button>
      <el-button type="primary" @click="validateFormula"  icon="el-icon-check">规则验证</el-button>
    </el-col>
  </el-row>
  <el-row class="tableRowAlign">
    <el-col :span="24">
      <el-tag
      style="background-color:#009fff;height: 28px"
        v-for="tag in tags"
        :key="tag.name"
        closable
      type="primary"
        @close="handleClose(tag)"
        :type="tag.type">
        {{tag.name}}
      </el-tag>

    </el-col>
  </el-row>
</div>
</template>

<script>
  export default {
    data() {
      return {
        tags: [],
        dBExpress:[],
        uIExpress:[] 
      };
    },
    methods: {
      getDBExpress(){
        let dbStr=''
        for (let i = 0; i < this.dBExpress.length; i++) {
          dbStr += this.dBExpress[i]
        }
        return dbStr
      },
      getUIExpress(){
        let uiStr=''
        for (let i = 0; i < this.uIExpress.length; i++) {
          uiStr += this.uIExpress[i]
        }
        return uiStr
      },
      //验证公式是否符合规则
      validateFormula () {
        debugger
        let dbStr = this.getDBExpress()
        let result = this.fondamentalJudge(dbStr)
        if (!result){
          this.$message.warning({
            message:'规则不符合要求!'
          })
        }else{
          this.$message.info({
            message:'规则正确!'
          })
        }
        console.log(result)
        return result
      },
      handleClose (tag) {
        debugger
        this.tags.splice(this.tags.indexOf(tag), 1);
        this.dBExpress.splice(this.tags.indexOf(tag), 1); //删除记录db
        this.uIExpress.splice(this.tags.indexOf(tag), 1); //删除记录用户显示的
      },
      formulaSymbol(param,type){

        if (type===1){ //现在是符号上一个不能是符号
          if (this.tags.length===0) { //第一个就是符号
            this.$message.warning({
              message: '规则不符合要求！'
            })
            return
          }else {
           let  tagType=  this.tags[this.tags.length-1].type
              if (type===tagType){
                this.$message.warning({
                  message: '规则不符合要求！'
                })
                return
              }
            }
          }
        this.dBExpress.push(param)  //记录db
        this.uIExpress.push(param)   //记录用户显示的

        let  tag={
          name:param,
          type:type,
          times:new Date().getTime()
        }
        this.tags.push(tag)  //tab标签显示
      },
      //调用改组件的页面给该组件传递参数
      neTypeClick(param){
       //清空数组
        this.dBExpress=[]
        this.uIExpress=[]
        this.tags=[]
      },
      //调用改组件的页面给该组件传递参数
      setFondamentalRules(param){
        debugger
        this.dBExpress.push('{'+param.kpiID+'}')  //记录db
        this.uIExpress.push('{'+param.label+'}')   //记录用户显示的

        if (this.tags.length > 0) {
          let tagType = this.tags[this.tags.length - 1].type
          if (-1 === tagType) {
            this.$message.warning({
              message: '规则不符合要求！'
            })
            return
          }
        }
        let  tag={
          name:param.label,
          kpiID:param.kpiID,
          type:param.type,
          times:new Date().getTime()
        }
        this.tags.push(tag)  //tab标签显示
      },
      //判断四则运算的函数
      fondamentalJudge (string) {
        //去除左边及右边的括号（这个是我的公式里面有特殊字符）
       let str= string.replace('{', '').replace('}','')
        // 剔除空白符
        string = str.replace(/\s/g, '')

        // 错误情况，空字符串
        if ('' === string) {
          return false
        }
        // 错误情况，运算符连续
        if (/[\+\-\*\/]{2,}/.test(string)) {
          return false
        }
        // 空括号
        if (/\(\)/.test(string)) {
          return false
        }
        // 最后一个符号是加、减、乘、除符号
        if (/[\+\-\*\/]$/.test(string)) {
          return false
        }
        // 错误情况，括号不配对
        var stack = []
        for (var i = 0, item; i < string.length; i++) {
          item = string.charAt(i)
          if ('(' === item) {
            stack.push('(')
          } else if (')' === item) {
            if (stack.length > 0) {
              stack.pop()
            } else {
              return false
            }
          }
        }
        if (0 !== stack.length) {
          return false
        }
        // 错误情况，(后面是运算符
        if (/\([\+\-\*\/]/.test(string)) {
          return false
        }
        // 错误情况，)前面是运算符
        if (/[\+\-\*\/]\)/.test(string)) {
          return false
        }
        // 错误情况，(前面不是运算符
        if (/[^\+\-\*\/]\(/.test(string)) {
          return false
        }
        // 错误情况，)后面不是运算符
        if (/\)[^\+\-\*\/]/.test(string)) {
          return false
        }

        // **错误情况最后一个字符是**+-*/
        if (/\*[\+\-\*\/]$/.test(string)) {
          return false
        }
        return true
      }
    }
  }
</script>
<style scoped>
  @import '../../assets/style/querystyle.css';
  .el-tag + .el-tag {
    margin-left: 2px;
    margin-top: 10px;
  }
  span {
    color: #d9d9d9;
    //font-size: medium;
  }
</style>

组件结果：