<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> 样式长这样
12-27
8220
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
02-09
09-22
2386
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
07-01
2206
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)