直接上代码,目前程序没有校验小数点输入是否正确情况。
v-model="result"
clearable>
export default {
name: 'Calculator',
data () {
return {
'result': ''
}
},
methods: {
sendMessage (message) {
this.$message({
message: message,
type: 'warning'
})
},
getResult (e) {
// 不可以连续输入 小数点
if (e === '.' && this.result.split('').reverse().join('').indexOf('.') === 0) {
this.sendMessage('请输入正确的浮点数1')
return false
}
// 如果第一次 输入的是 运算符号,则提示
if (['+', '-', '*', '/', '%', '.'].indexOf(e) > -1 && this.result.length === 0) {
this.sendMessage('请先输入数字')
return false
}
// 如果第一次 输入的是 = 号,则直接返回
if (e === '=' && this.result.length === 0) {
return false
}
// 出现 = 号则表示已经执行过计算,需要清空
if (this.result.indexOf('=') > -1) {
this.result = ''
}
switch (e) {
case '=':
// eslint-disable-next-line no-eval
this.result += '=' + eval(this.result)
break
default:
this.result += e
}
}
}
}
#result{
margin-bottom: 10px;
}
.grid-content{
text-align: center;
height: 40px;
border:solid 1px #e6e6e6;
line-height: 40px;
margin-bottom: 10px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
}
.grid-content:hover{
background-color: #f5f5f5;
}
页面效果: