<style>
.calculator {
width: 300px;
margin: 0 auto;
background-color: #f2f2f2;
border: 1px solid #d9d9d9;
border-radius: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
padding: 10px;
display: inline-block;
}
.display {
text-align: right;
margin-bottom: 10px;
}
.display-input {
width: 100%;
font-size: 24px;
padding: 10px;
border: none;
border-bottom: 2px solid #3498db;
}
.buttons {
display: flex;
flex-direction: column;
}
.row {
display: flex;
justify-content: space-between;
}
.number-button,
.operator-button,
.calculate-button,
.clear-button {
width: 70px;
height: 70px;
font-size: 24px;
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.2s;
}
.number-button {
background-color: #3498db;
color: #fff;
}
.operator-button {
background-color: #e74c3c;
color: #fff;
}
.calculate-button {
background-color: #27ae60;
color: #fff;
}
.clear-button {
background-color: #f39c12;
color: #fff;
}
.number-button:hover,
.operator-button:hover,
.calculate-button:hover,
.clear-button:hover {
background-color: #2e86de;
}
</style>
<template>
<div class="calculator">
<div class="display">
<input v-model="inputValue" type="text" disabled class="display-input" />
</div>
<div class="buttons">
<div class="row">
<button @click="appendNumber(1)" class="number-button">1</button>
<button @click="appendNumber(2)" class="number-button">2</button>
<button @click="appendNumber(3)" class="number-button">3</button>
<button @click="appendOperator('+')" class="operator-button">+</button>
</div>
<div class="row">
<button @click="appendNumber(4)" class="number-button">4</button>
<button @click="appendNumber(5)" class="number-button">5</button>
<button @click="appendNumber(6)" class="number-button">6</button>
<button @click="appendOperator('-')" class="operator-button">-</button>
</div>
<div class="row">
<button @click="appendNumber(7)" class="number-button">7</button>
<button @click="appendNumber(8)" class="number-button">8</button>
<button @click="appendNumber(9)" class="number-button">9</button>
<button @click="appendOperator('*')" class="operator-button">*</button>
</div>
<div class="row">
<button @click="calculateResult()" class="calculate-button">=</button>
<button @click="clearInput()" class="clear-button">C</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
};
},
methods: {
appendNumber(number) {
this.inputValue += number.toString();
},
appendOperator(operator) {
this.inputValue += ` ${operator} `;
},
calculateResult() {
const result = eval(this.inputValue);
this.$store.dispatch('updateCurrentValue', result);
this.inputValue = result.toString();
},
clearInput() {
this.inputValue = '';
},
},
};
</script>
store下面的index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
currentValue: 0,
};
const mutations = {
SET_CURRENT_VALUE(state, value) {
state.currentValue = value;
},
};
const actions = {
updateCurrentValue({ commit }, value) {
commit("SET_CURRENT_VALUE", value);
},
};
export default new Vuex.Store({
state,
mutations,
actions,
});