116 lines
2.6 KiB
Vue
116 lines
2.6 KiB
Vue
<template>
|
|
<div class = "q-pa-lg" style = "max-width: 900px; margin: auto;">
|
|
|
|
<q-input
|
|
filled
|
|
v-model = "inputValue"
|
|
label = ""
|
|
readonly
|
|
/>
|
|
|
|
|
|
<div class = "q-gutter-md">
|
|
<div class = "row q-gutter-md">
|
|
<q-btn
|
|
color = "primary"
|
|
unelevated
|
|
class = "col numpadBtn"
|
|
@click = "appendNumber(1)"
|
|
>1</q-btn>
|
|
|
|
<q-btn
|
|
color = "primary"
|
|
unelevated
|
|
class = "col numpadBtn"
|
|
@click = "appendNumber(2)"
|
|
>2</q-btn>
|
|
|
|
<q-btn
|
|
color = "primary"
|
|
unelevated
|
|
class = "col numpadBtn"
|
|
@click = "appendNumber(3)"
|
|
>3</q-btn>
|
|
</div>
|
|
|
|
<div class = "row q-gutter-md">
|
|
<q-btn
|
|
color = "primary"
|
|
unelevated
|
|
class = "col numpadBtn"
|
|
@click = "appendNumber(4)"
|
|
>4</q-btn>
|
|
|
|
<q-btn
|
|
color = "primary"
|
|
unelevated
|
|
class = "col numpadBtn"
|
|
@click = "appendNumber(5)"
|
|
>5</q-btn>
|
|
|
|
<q-btn
|
|
color = "primary"
|
|
unelevated
|
|
class = "col numpadBtn"
|
|
@click = "appendNumber(6)"
|
|
>6</q-btn>
|
|
</div>
|
|
|
|
<div class = "row q-gutter-md">
|
|
<q-btn
|
|
color = "primary"
|
|
unelevated
|
|
class = "col numpadBtn"
|
|
@click = "appendNumber(7)"
|
|
>7</q-btn>
|
|
|
|
<q-btn
|
|
color = "primary"
|
|
unelevated
|
|
class = "col numpadBtn"
|
|
@click = "appendNumber(8)"
|
|
>8</q-btn>
|
|
|
|
<q-btn
|
|
color = "primary"
|
|
unelevated
|
|
class = "col numpadBtn"
|
|
@click = "appendNumber(9)"
|
|
>9</q-btn>
|
|
</div>
|
|
|
|
<div class = "row q-gutter-md">
|
|
<q-btn
|
|
color = "primary"
|
|
unelevated
|
|
class = "col numpadBtn"
|
|
@click = "appendNumber(0)"
|
|
>0</q-btn>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<q-btn
|
|
label = "Enter"
|
|
color = "secondary"
|
|
class = "q-mt-md full-width"
|
|
@click = "onEnter"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const inputValue = ref('')
|
|
|
|
function appendNumber(num) {
|
|
inputValue.value += num
|
|
}
|
|
|
|
function onEnter() {
|
|
console.log(inputValue.value)
|
|
inputValue.value = ''
|
|
}
|
|
</script>
|