me/mime-chat
Watch
1
0
Fork
You've already forked mime-chat
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor keydownHandler composable

Browse source
This commit is contained in:
riqo 2020-10-25 10:57:04 -05:00
commit 7773bedff5
6 changed files with 617 additions and 618 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/components/UI/UIDetails/inputItem.vue
View file

@ -1,30 +1,17 @@
<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>
<foreignObject x="10" y="10" width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<div contenteditable
v-if="input.length > 0"
>
{{ input }}
</div>
</div>
</foreignObject>
</template>
<script>
import useKeyDownHandler from "@/composables/useKeyDownHandler";
import useKeyDownHandler from "@/composables/keyDownHandler/useKeyDownHandler";
import { defineComponent, onUnmounted } from "vue";
export default defineComponent({
name: "InputItem",
@ -46,14 +33,17 @@ export default defineComponent({
</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;
}
div[contenteditable] {
width: auto;
max-width: 200px;
display: table;
padding: 7px 15px 7px 15px;
border: 0;
border-radius: 25px;
color: #fff;
background-color: #61b4f4;
font-size: 14;
text-align: left;
}
</style>