文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue实现计算器封装

2024-04-02 19:55

关注

本文实例为大家分享了vue实现计算器封装代码,供大家参考,具体内容如下

前言:根据计算器可增添加减乘除的封装可扩展,大家请参照效果如下:

文件目录

我们导入了四个js包,在下面有源代码,当前计算器页只有一个valculator.vue文件。

valculator.vue:<html代码>

template>
  <div class="about">
    <h1>这是个计算器你信吗</h1>
    <van-cell-group type="text">
      <van-field
        οninput="value=value.replace(/[^\d+(+)+(-)+(*)]/g, '').replace(/^0{1,}/g,'')"
        v-model="inputValue"
        placeholder="请输入数字"
      />
    </van-cell-group>
    <div style="margin-top:20%">
      <van-grid clickable :column-num="4" :gutter="10">
        <van-grid-item @click="onclick(i)" v-for="(num, i) in dataNum" :key="i" :text="dataNum[i]" />
      </van-grid>
    </div>
  </div>
</template>

valculator.vue:《js方法》

<script>
// eslint-disable-next-line no-unused-vars
import { Field } from 'vant'
export default {
  data () {
    return {
      // 数字加减乘除数组
      dataNum: [
        '+',
        '-',
        '*',
        '/',
        '1',
        '2',
        '3',
        '< X',
        '4',
        '5',
        '6',
        '=',
        '7',
        '8',
        '9',
        '0'
      ],
      inputValue: '', // input当前显示值
      inputStorage: '', // input输入值存储
      calculator: '', // 解析拿到的值

      temporaryVariables1: '', // 存储临时计算拼接值1
      temporaryVariables2: '', // 存储临时计算拼接值2
      temporaryOperator: '' // 存储临时运算符
    }
  },
  methods: {
    // 点击事件
    onclick (index) {
      this.parsing(index) // 解析当前的值
      this.judge() // 判断进行运算
    },

    // 解析当前拿到的值
    parsing (index) {
      switch (index) {
        case 4:
          this.calculator = '1'
          break
        case 5:
          this.calculator = '2'
          break
        case 6:
          this.calculator = '3'
          break
        case 8:
          this.calculator = '4'
          break
        case 9:
          this.calculator = '5'
          break
        case 10:
          this.calculator = '6'
          break
        case 12:
          this.calculator = '7'
          break
        case 13:
          this.calculator = '8'
          break
        case 14:
          this.calculator = '9'
          break
        case 15:
          this.calculator = '0'
          break
        case 0:
          this.calculator = '+'
          break
        case 1:
          this.calculator = '-'
          break
        case 2:
          this.calculator = '*'
          break
        case 3:
          this.calculator = '/'
          break
        case 11:
          this.calculator = '='
          break
        case 7:
          this.calculator = 'X'
          this.Clear()
          break
        default:
          break
      }

      //   this.outValue = this.calculator;
      //   this.inputBox();
      //   console.log(this.calculator);
    },

    // 判断是哪个运算符
    judge () {
      if (this.calculator === '=') {
        this.equal()
      } else if (this.calculator === 'X') {
        this.Clear()
      } else {
        this.showOn() // 显示当前的值
        this.calculation() // 计算当前的值
      }
    },

    // 计算当前的值
    calculation () {
      // 如果为空表示当前为第一个运算符,否则开始计算

      const vae = this.isNumber(this.calculator) // 判断当前输入值是否为数字
      if (this.temporaryOperator === '') {
        if (vae === false) {
          this.temporaryOperator = this.calculator // 存储当前计算值
        } else {
          this.temporaryVariables1 += this.calculator // 计算的值:加减触发前拼接的值
        }
      } else {
        if (vae === false) {
          this.temporaryVariables1 = this.Retrieval.retrieval(
            this.temporaryOperator,
            this.temporaryVariables1,
            this.temporaryVariables2
          ) // 如果当前有输入运算法调取加减乘除

          this.assignmentConversion() // 清空第二个数
          this.temporaryOperator = this.calculator // 计算完后保留当前的运算符
        } else {
          this.temporaryVariables2 += this.calculator // 继续第二个拼接
        }
      }
    },

    // 判断是否为数字:“12.3”等都为true, “哈哈”、“12.33”等都为false
    isNumber (val) {
      var regPos = /^\d+(\.\d+)?$/ // 非负浮点数
      var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 负浮点数
      if (regPos.test(val) || regNeg.test(val)) {
        return true
      } else {
        return false
      }
    },

    // 等于
    equal () {
      this.temporaryVariables1 = this.Retrieval.retrieval(
        this.temporaryOperator,
        this.temporaryVariables1,
        this.temporaryVariables2
      ) // 调取加减乘除
      this.assignmentConversion() // 清空第二个数
      this.inputValue = this.temporaryVariables1 // 将计算后的值显示在屏幕上
      this.inputStorage = '' // 清空之前存储的值
    },

    // 清空第二个数
    assignmentConversion () {
      this.temporaryVariables2 = '' // 第二个清空用来再次保留
    },

    // 清除显示的数据
    Clear () {
      this.inputValue = '' // 显示的值
      this.inputStorage = '' // input输入值存储
      this.calculator = '' // 解析拿到的值

      this.temporaryVariables1 = '' // 存储临时计算拼接值1
      this.temporaryVariables2 = '' // 存储临时计算拼接值2
      this.temporaryOperator = '' // 存储临时运算符
    },

    // 显示当前的值
    showOn () {
      this.inputValue = this.inputStorage // 之前存储先赋给要显示的
      this.inputValue += this.calculator // 要显示的值再次加上当前点击的值
      this.inputStorage = this.inputValue // 同步要存储的值
    }
  }
}

valculator.vue:《style》

<style scoped>
div.inputAll {
  position: relative;
}

div.inputOne {
  position: absolute;
  top: 10%;
  
}

div.inputTwo {
  position: absolute;
  top: 15%;
}

div.inputLine {
  border-bottom: 1px solid gray;
  top: 12.5%;
  position: absolute;
}
</style>

导入其他js文件:

retrieval.js:计算器加减乘除选择器

// eslint-disable-next-line no-unused-vars
import Add from '../valculator/add'
// eslint-disable-next-line no-unused-vars
import Subtraction from '../valculator/subtraction'
import Multiplication from '../valculator/multiplication'
export default {
  retrieval: function (operator, variables1, variables2) {
    switch (operator) {
      case '+':
        // 调取公共加法
        // eslint-disable-next-line no-undef
        variables1 = Add.add(variables1, variables2)
        break
      case '-':
        // 调取公共减法
        // eslint-disable-next-line no-undef
        variables1 = Subtraction.subtraction(variables1, variables2)
        break
      // eslint-disable-next-line no-duplicate-case
      case '*':
        // 调取公共乘法
        // eslint-disable-next-line no-undef
        variables1 = Multiplication.multiplication(variables1, variables2)
        break
      default:
        break
    }
    return variables1
  }
}

add.js:加法操作

export default {
  add: function (addOne, addTwo) {
    // eslint-disable-next-line no-unused-vars
    addOne = Number(addOne) + Number(addTwo) // 显示当前的值
    return addOne
  }
}

multiplication.js:乘法操作

export default {
  multiplication: function (addOne, addTwo) {
    // eslint-disable-next-line no-unused-vars
    addOne = Number(addOne) * Number(addTwo) // 显示当前的值
    return addOne
  }
}

subtraction.js:减法操作

export default {
  subtraction: function (addOne, addTwo) {
    // eslint-disable-next-line no-unused-vars
    addOne = Number(addOne) - Number(addTwo) // 显示当前的值
    return addOne
  }
}

总结:

我们对于加减同一级别的代码可以自己添加一个js文件,然后retrieval.js里面写进入即可,当然我们最好将这个js文件换成xml就可以实现仿反射+配置文件了,对于乘除法我们需要进一步更改计算器为每次都是两个计算,不可以一次性输入很多数字,这样可以避免开优先级问题,当然我们要做成优先级是我们很重要的学习理论依据。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯