计算器组件

<template>
  <view >
          <view class="keyboard" @click.stop="onClickKeyboard()">
            <view class="keyboard-wrapper">
              <view class="key-number" @click.stop="onClickDigit('1')">1</view>
              <view class="key-number" @click.stop="onClickDigit('2')">2</view>
              <view class="key-number" @click.stop="onClickDigit('3')">3</view>
              <view class="key-number" @click.stop="onDel">
                删除
              </view>
              <view class="key-number" @click.stop="onClickDigit('4')">4</view>
              <view class="key-number" @click.stop="onClickDigit('5')">5</view>
              <view class="key-number" @click.stop="onClickDigit('6')">6</view>
              <view class="key-number" @click.stop="onClickDigitEmpty">
                清空
              </view>
              <view class="key-number" @click.stop="onClickDigit('7')">7</view>
              <view class="key-number" @click.stop="onClickDigit('8')">8</view>
              <view class="key-number" @click.stop="onClickDigit('9')">9</view>
              <view class="key-sure" @click.stop="confirmCashier">
                确认收银
              </view>
              <view  class="key-number" @click.stop="onClickDigit('.')">.</view>
              <view :class="type === 'float' ? 'key-number' : 'key-number '" @click.stop="onClickDigit('0')">0</view>
              <view  class="key-number" @click.stop="onClickReduce('-')">-</view>
            </view>
          </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      money: '',

    }
  },
  props: {
    payValue: {
      type: [Number, String],
      default: '0',
    },
  },
  created() {
    this.money = String(this.payValue)

  },
  watch: {
    payValue(e) {
      try {
        if (isNaN(Number(e))) {

        } else {
          // 如果有max 最大限制 那么 判断每次的值如果大于最大值 那么则等于最大值
          if (this.max && this.max !== Infinity) {
            if (this.money > this.max) {
              this.money = String(this.max)
            } else {
              this.money = String(e)
            }
          } else {
            this.money = String(e)
          }
        }
      } catch (e) {
        this.money = '0'
      }
    },
    money(e) {
      this.$emit("onChange", e);
    }
  },
  computed: {

  },
  methods: {
    onDel() {
      this.money = this.money.substring(0, this.money.length - 1)
      if (this.money.length === 0){
        this.money = '0'
        return;
      }
    },
    // 点击键盘（非数字、小数点以外的地方）
    onClickKeyboard() {
    },
    // 点击数字、小数点
    onClickDigit(op) {
      let clickVal = op + '';
      // 如果一开始就是空的 并且 弄了个小数点
      if ( '' === this.money && '.' === clickVal) {
        this.money = "0.";
        return;
      }
      // 如果第一位是0 并且 下一个点击的也不是小数点 那么直接给他替换了
      if ('0' === this.money && '.' !== clickVal) {
        this.money = clickVal
        return;
      }
      // 小数点场景
      let decimalPoint = this.money.indexOf(".");
      if (-1 !== decimalPoint) {
        // 不能有两个小数点
        if ('.' === clickVal) {
          if(this.money.slice(-1) === '-' || this.money.slice(-1) === '.') {
            return;
          }
        }
        // 小数点的数
        const decimalVal = this.money.substring(decimalPoint + 1);
        // 如果只有1位 那么让他加进去
        if (decimalVal.length < 2) {
          this.money += clickVal;
        }
        if (this.money.includes('-')) {
          this.money += clickVal;
        }
      } else {
        if (this.money.length < 6 || '.' === clickVal) {
          this.money += clickVal;
        }
      }
    },
    // 点击减号时
    onClickReduce(op) {
      // 检查当前金额字符串的最后一个字符是否已经是减号或者是小数点
      if (this.money.slice(-1) !== '-' || this.money.slice(-1) !== '.') {
        // 如果不是减号，则拼接减号
        this.money += op;
      } else {
        // 如果已经有一个减号，可能需要给出提示或者什么都不做
        console.log('已经添加过减号');
      }
    },
    onClickDigitEmpty() {
      this.money = '0'
    },
    // 确认收银
    confirmCashier() {
      this.calculateExpression(this.money)

    },
    // 函数用于计算this.money字符串表达式的结果
    calculateExpression() {
      // 检查this.money中是否包含减号，以确定是否需要进行计算
      if (this.money.includes('-')) {
        // 使用split方法按减号分割字符串，得到所有操作数
        let parts = this.money.split('-');
        // 假设表达式有效（即，格式总是"数-数"），转换字符串为数字并计算
        if (parts.length === 2) {
          let result = parseFloat(parts[0]) - parseFloat(parts[1]);
          // 更新this.money为计算结果
          if(result < 0) {
            result = 0
          }
          this.money = result.toString();
        } else {
          // 如果表达式不符合预期的格式，可以在这里处理错误或给出提示
          console.error('表达式格式错误');
        }
      } else {
        // 如果没有减号，可能不需要做任何事，或者根据需要给出提示
        console.log('没有操作符，无需计算');
      }
      this.$emit("conformCashier", this.money);
    },

  }
}
</script>

<style lang="scss" scoped>

.keyboard {
  background-color: #eff2f3;
  width: 100%;
  padding: 2vh;
  border-radius: 0.7vw;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}
.keyboard-wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(4, 11vh);
}
[class^="key-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  background-color: #fff;
  color: #313131;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
[class^="key-"]:hover, [class^="key-"]:active {
  opacity: .8;
}
[class^="key-"]:active {
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
  transition: all .1s ease-in;
}
.key-number.zero {
  grid-column-start: 1;
  grid-column-end: 3;
}
.key-del {
  font-size: 16px;
  grid-column: 4;
  grid-row: 1;
}
.key-sure {
  background-color: #60BA63;
  color: #fff;
  font-size: 16px;
  grid-column: 4;
  grid-row-start: 3;
  grid-row-end: 5;
}
</style>

样式长这样