效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mini计算器</title>
<style type="text/css">
body {
margin: 100px;
}
#app {
border: 1px solid #ccc;
width: 175px;
height: 285px;
padding: 10px;
border-radius: 4px;
}
#app .btn {
width: 40px;
height: 40px;
border: 1px solid #ccc;
border-radius: 2px;
background-color: white;
margin-bottom: 10px;
cursor: pointer;
color: #666;
font-weight: bold;
}
#app .btn:hover {
background-color: #333;
color: white;
}
#input-box {
width: 161px;
text-align: right;
height: 30px;
border: 1px solid #ccc;
border-radius: 2px;
margin-bottom: 10px;
background-color: white;
padding: 0 5px;
}
#app .btn-double {
width: 84px;
}
</style>
</head>
<body>
<div id="app">
<result-box :get-value="resultvalue"></result-box>
<calc-box>
<button class="btn" @click="clear">C</button>
<button class="btn" @click="sign">+/-</button>
<button class="btn" @click="sambol('*')">*</button>
<button class="btn" @click="sambol('/')">/</button>
<button class="btn" @click="input('1')">1</button>
<button class="btn" @click="input('2')">2</button>
<button class="btn" @click="input('3')">3</button>
<button class="btn" @click="sambol('-')">-</button>
<button class="btn" @click="input('4')">4</button>
<button class="btn" @click="input('5')">5</button>
<button class="btn" @click="input('6')">6</button>
<button class="btn" @click="sambol('+')">+</button>
<button class="btn" @click="input('7')">7</button>
<button class="btn" @click="input('8')">8</button>
<button class="btn" @click="input('9')">9</button>
<button class="btn" @click="sambol('%')">%</button>
<button class="btn" @click="input('0')">0</button>
<button class="btn" @click="point">.</button>
<button class="btn btn-double" @click="calculate">=</button>
</calc-box>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 去掉提示
// Vue.config.productionTip=false
const resultBox = {
// 父子通信
props: ["getValue"],
// 计算属性
computed: {
value() {
return this.getValue
}
},
template: `<input id="input-box" type="text" v-model="value" readonly />`
}
const calcBox = {
template: `<div id="calc-box">
<slot></slot>
</div>
`
}
const app = new Vue({
el: "#app",
data: {
resultvalue: 0
},
// 组件
components: {
// 计算器结果框
'result-box': resultBox,
// 计算器输入面板组件
'calc-box': calcBox
},
methods: {
// 输入数值 累加
input(param) {
// 拒绝开始0和反复0 防止0.被和谐
if (parseInt(this.resultvalue) === 0 && !/0[\.|\s]/.test(this.resultvalue)) {
this.resultvalue = param
} else {
this.resultvalue += param
}
},
// 加减乘除
sambol(param) {
// 有空格显得更加好看
this.resultvalue += ' ' + param + ' '
},
// 处理小数点
point() {
const strValue = this.toStr()
// 得到最后一位数值
const lastNumber = strValue.substring(strValue.lastIndexOf(' '))
// 判断是否已经存在小数点
// 存在
if (lastNumber.indexOf('.') !== -1) {
return
} else {
this.resultvalue += '.'
}
},
// 转换成字符串
toStr() {
return this.resultvalue.toString()
},
clear(){
this.resultvalue=0
},
// 正负号设置
sign(){
const strValue=this.toStr()
let lastNumber = strValue.substring(strValue.lastIndexOf(' '))
// 得到之前的数值+符号
let prevNumber=strValue.substr(0,strValue.lastIndexOf(' '))
// 判断当前是否有正负号
if(lastNumber.indexOf('-')===-1){
lastNumber=' -'+lastNumber.trim()
}
else{
lastNumber=' '+lastNumber.trim().substr(1)
}
this.resultvalue=prevNumber+lastNumber;
},
calculate(){
try{
this.resultvalue=eval(this.resultvalue)
}catch(e){
//TODO handle the exception
alert('no')
}
}
}
})
</script>
</body>
</html>
