首先呢, 看了一下没找到带数字键盘的demo,于是乎自己写了个记录一下。
Vue+antd 组件 原理也超级简单,利用eval 计算 大佬轻点喷
<template>
<div id="app" style="width: 800px">
<a-row>
<a-col>
<a-input type="text" value="" v-model="rel"></a-input>
<a-input type="button" value="del" @click="del()"> DEL</a-input>
<a-input type="button" value="C" @click="clean()">C</a-input>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-input type="button" value="7" @click="add(7)">7</a-input>
</a-col>
<a-col :span="6">
<a-input type="button" value="8" @click="add(8)">8</a-input>
</a-col>
<a-col :span="6">
<a-input type="button" value="9" @click="add(9)">9</a-input>
</a-col>
<a-col :span="6">
<a-input type="button" value="+" @click="add('+')">+</a-input>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-input type="button" value="4" @click="add(4)">4</a-input>
</a-col>
<a-col :span="6">
<a-input type="button" value="5" @click="add(5)">5</a-input>
</a-col>
<a-col :span="6">
<a-input type="button" value="6" @click="add(6)">6</a-input>
</a-col>
<a-col :span="6">
<a-input type="button" value="-" @click="add('-')">-</a-input>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-input type="button" value="1" @click="add(1)">1</a-input>
</a-col>
<a-col :span="6">
<a-input type="button" value="2" @click="add(2)">2</a-input>
</a-col>
<a-col :span="6">
<a-input type="button" value="3" @click="add(3)">3</a-input>
</a-col>
<a-col :span="6">
<a-input type="button" value="*" @click="add('*')">*</a-input>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-input type="button" value="0" @click="add(0)">0</a-input>
</a-col>
<a-col :span="6">
<a-input type="button" value="." @click="add('.')">.</a-input>
</a-col>
<a-col :span="6">
<a-input type="button" value="/" @click="add('/')">/</a-input>
</a-col>
<a-col :span="6">
<a-input type="button" value="=" @click="result('=')">=</a-input>
</a-col>
</a-row>
</div>
</template>
<script>
export default {
data() {
return {
rel: "",
};
},
methods: {
add(index) {
this.rel += index;
},
del() {
this.rel = this.rel.substring(0, this.rel.length - 1);
},
result() {
this.rel = String(this.rel);
this.rel = eval(this.rel);
},
clean() {
this.rel = "";
},
},
};
</script>