add textAudioInput component
This commit is contained in:
parent
24e2453e7c
commit
6d20af467e
8 changed files with 22 additions and 16 deletions
43
src/components/taInput/textDetails/text.vue
Normal file
43
src/components/taInput/textDetails/text.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<foreignObject class="inputContainer" :x="textXoffset" y="450" width="55%" height="50%">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
<div class="inputBubble" contenteditable v-show="input.length > 0">
|
||||
<p>{{ input }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
export default defineComponent({
|
||||
name: "TextInput",
|
||||
props: {
|
||||
input: String,
|
||||
textXoffset: String,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
div[contenteditable] {
|
||||
width: auto;
|
||||
max-width: 180px;
|
||||
height: auto;
|
||||
min-height: 36px;
|
||||
display: table;
|
||||
justify-items: center;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
color: #000;
|
||||
background-color: #b9b9b9;
|
||||
font-size: 14;
|
||||
text-align: left;
|
||||
p {
|
||||
max-width: 150px;
|
||||
overflow-wrap: break-word;
|
||||
padding: 7px 10px 5px 10px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue