59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
<template>
|
|
<div class="inputContainer">
|
|
<!-- <input
|
|
class="inputItem"
|
|
v-model="input"
|
|
:size="input.length"
|
|
v-if="input.length > 0"
|
|
type="text"
|
|
autofocus
|
|
> -->
|
|
|
|
<foreignObject x="10" y="10" width="100%" height="100%">
|
|
<div xmlns="http://www.w3.org/1999/xhtml">
|
|
<input
|
|
class="inputItem"
|
|
v-model="input"
|
|
:size="input.length"
|
|
v-if="input.length > 0"
|
|
type="text"
|
|
>
|
|
</div>
|
|
</foreignObject>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import useKeyDownHandler from "@/composables/useKeyDownHandler";
|
|
import { defineComponent, onUnmounted } from "vue";
|
|
export default defineComponent({
|
|
name: "InputItem",
|
|
setup() {
|
|
const {keyDownHandler, input} = useKeyDownHandler();
|
|
|
|
// add window event listener
|
|
window.addEventListener("keydown", keyDownHandler);
|
|
// remove Event Listener on component unMount
|
|
onUnmounted(() => {
|
|
window.removeEventListener("keydown", keyDownHandler);
|
|
});
|
|
|
|
return {
|
|
input
|
|
};
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.inputItem {
|
|
/* width: 100%; */
|
|
color: #fff;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
border: 0;
|
|
text-align: center;
|
|
background-color: #61b4f4;
|
|
border-radius: 25px;
|
|
}
|
|
</style>
|