使用Vue2仿造Windows系统计算器样式实现计算器的基础功能
第一步:创建Vue2-cli
第二步:引入ElementUI
完整代码
<script>
export default {
name: "App",
data: function() {
return {
value: "",
buttonList: ["CE","C","<-","/","7", "8", "9","*", "4", "5", "6", "-", "1", "2", "3", "+", "+/-", "0", ".", "="],
};
},
methods: {
handleClick: function(button) {
if (button === "=") {
try {
this.value = eval(this.value);
} catch {
this.value = "Error";
}
} else if (button === "<-") {
this.value = this.value.slice(0, -1);
} else if (button === "C"||button === "CE") {
this.value = "";
} else {
this.value += button;
}
}
}
};
</script>
<template>
<div>
<el-container>
<el-header>
<input class="inputNum" v-model="value" readonly>
</el-header>
<el-main>
<el-row type="flex" class="button-container">
<el-button class="buttonNum"
:class="{ 'last-button': button === buttonList[buttonList.length - 1] }"
v-for="button in buttonList"
@click="handleClick(button)"
:key="button">{{ button }}</el-button>
</el-row>
</el-main>
</el-container>
</div>
</template>
<style>
.el-container {
height: 335px;
width: 300px;
border: 1px solid #eee;
}
.el-main {
background-color: #E9EEF3;
padding: 0 !important;
}
.inputNum {
width: 100%;
text-align: right;
border: none;
outline: none;
font-size: 16px;
}
.button-container {
flex-wrap: wrap;
gap: 5px;
}
.buttonNum {
margin-left: 0px !important;
width: 70px;
height: 50px;
font-size: 20px;
}
.last-button {
background-color: #005A9E !important;
color: white !important;
}
</style>