使用 Vue.js 进行键盘绑定

Question

我是编码和 Vue 的新手，我被困在一个部分。

我正在构建javascript计算器，我需要能够使用鼠标和键盘的计算器。我设法用鼠标做到这一点，但我只是不能用键盘工作。这是我的代码。有人可以帮我吗？

我知道我需要以某种方式将其绑定到输入，但我无法使其工作。

<template>
<v-app >
<div class="cont" >
<div class="name">
<h1>Vue Calculator</h1>
</div>
<div class="calc_display">
<input type="text" v-model="result" @click="keyboardInput" class="calc_result text-sm-center" >
</div>
<div class="buttons">
<v-btn @click="clear" color="red darken-1" class="btn">CE</v-btn>
<v-btn @click="square" color="light-blue lighten-1" class="btn">&radic;</v-btn>
<v-btn @click="back"  color="light-blue lighten-1" class="btn">&larr;</v-btn>
<v-btn @click="divide" color="light-blue lighten-1" class="btn">/</v-btn>
<v-btn @click="append('7')" color="gray" class="btn">7</v-btn>
<v-btn @click="append('8')" color="gray" class="btn">8</v-btn>
<v-btn @click="append('9')" color="gray" class="btn">9</v-btn>
<v-btn @click="times" color="light-blue lighten-1" class="btn">*</v-btn>
<v-btn @click="append('4')" color="gray" class="btn">4</v-btn>
<v-btn @click="append('5')" color="gray" class="btn">5</v-btn>
<v-btn @click="append('6')" color="gray" class="btn">6</v-btn>
<v-btn @click="add" color="light-blue lighten-1" class="btn">+</v-btn>
<v-btn @click="append('1')" color="gray" class="btn" >1</v-btn>
<v-btn @click="append('2')" color="gray" class="btn">2</v-btn>
<v-btn @click="append('3')" color="gray" class="btn">3</v-btn>
<v-btn @click="minus" color="light-blue lighten-1" class="btn">-</v-btn>
<v-btn @click="append('0')" color="gray" class="btn">0</v-btn>
<v-btn @click="dot" color="gray" class="btn">.</v-btn>
<v-btn @click="change" color="gray" class="btn">+/-</v-btn>
<v-btn @click="equal" color="green darken-2" class="btn">=</v-btn>
</div>
</div>
<v-card-actions class="primary lighte-2 justify-center white--text">
&copy;2018 — <strong>Vue calculator</strong>
</v-card-actions>
</v-app>
</template>
<script>
export default {
data() {
return {
firstNumber: null,
result: '',
operator: null,
operatorClicked: false,
sign: '',
}
},
methods: {
clear() {
this.result = '';
},
change() {
this.result *= -1;
},
append(number) {
if (number == '0' && this.result == '')
this.result = ''
else {
if (this.operatorClicked) {
this.result = ''
this.operatorClicked = false
}
this.result = `${this.result}${number}`
}
},
dot() {
if (this.result.indexOf('.') === -1)
this.append('.')
},
setFirst() {
this.firstNumber = this.result
this.operatorClicked = true;
},
divide() {
this.operator = (a, b) => a / b
this.setFirst();
},
times() {
this.operator = (a, b) => a * b
this.setFirst();
},
minus() {
this.operator = (a, b) => a - b
this.setFirst();
},
add() {
this.operator = (a, b) => a + b
this.setFirst();
},
equal() {
this.result = this.operator(
parseFloat(this.firstNumber),
parseFloat(this.result)
)
this.firstNumber = null
this.sign = ''
},
back() {
if (this.result)
this.result = this.result.slice(0, -1)
},
square() {
if (parseFloat(this.result) >= 0)
this.result = Math.sqrt(parseFloat(this.result))
},
//THIS IS THE CODE THAT I CAN NOT MAKE IT WORK
keyboardInput(key) {
if (key.which === 48) {
this.result.append(0);
} else if (key.which === 49) {
this.result += "1";
} else if (key.which === 50) {
this.result += "2";
} else if (key.which === 51) {
this.result += "3";
} else if (key.which === 52) {
this.result += "4";
} else if (key.which === 53) {
this.result += "5";
} else if (key.which === 54) {
this.result += "6";
} else if (key.which === 55) {
this.result += "7";
} else if (key.which === 56) {
this.result += "8";
} else if (key.which === 57) {
this.result += "9";
} else if (key.which === 46) {
this.result += ".";
} else if (key.which === 42) {
this.result += "*";
} else if (key.which === 47) {
this.result += "/";
} else if (key.which === 43) {
this.result += "+";
} else if (key.which === 45) {
this.result += "-";
} else if (key.which === 13) {
equal();
} else if (key.which === 99) {
clear();
} else {
this.result = this.result;
}
return true;
}
}
}
</script>

'

Answer 1

您没有通过任何实际按键使用keyboardInput。您可以像这样简单地连接它：

<div class="cont" @keyup="onKeyPress">

然后在代码中：

methods: {
onKeyPress(event) {
this.keyboardInput({ which: event.keyCode })
}
}

但我建议重写这个keyboardInput，因为我不确定为什么它会像这样工作:)