Add formating word for chat

This commit is contained in:
Hepatica
2024-01-27 01:30:40 +01:00
parent 55af0ccf2d
commit 85031adbcf
2 changed files with 32 additions and 21 deletions

View File

@@ -30,8 +30,10 @@
} */ } */
.content p { .content p {
display: block;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
overflow: hidden;
} }
.chat__content--users { .chat__content--users {

View File

@@ -1,45 +1,54 @@
<template> <template>
<div class="write"> <div class="write">
<div class="write__content"> <div class="write__content">
<input type="text" @keyup.enter="sendmsgDataEnter" v-model.trim="msg" placeholder="Напишите сообщение..." maxlength="100"> <input
<button type="text"
:disabled="CheckerforBtn()" @keyup.enter="sendmsgDataEnter"
type="submit" v-model.trim="msg"
@click="SendmsgData" placeholder="Напишите сообщение..."
> maxlength="200"
<img src="@/assets/icons-chat/sendmsg-icon.png"> />
<button :disabled="CheckerforBtn()" type="submit" @click="SendmsgData">
<img src="@/assets/icons-chat/sendmsg-icon.png" />
</button> </button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
msg: '', msg: "",
username: 'TEST USER', username: "TEST USER",
icon: require('../assets/icons-test/person-icon-chat.png'), icon: require("../assets/icons-test/person-icon-chat.png"),
} };
}, },
methods: { methods: {
CheckerforBtn() { CheckerforBtn() {
return this.msg === '' return this.msg === "";
}, },
sendmsgDataEnter() { sendmsgDataEnter() {
if (this.msg !== '') { if (this.msg !== "") {
this.SendmsgData() this.SendmsgData();
} }
}, },
SendmsgData() { SendmsgData() {
this.$emit('send', [this.msg, this.username, this.icon]) const formattedWord = this.InsertSpaceEvery24Chars(this.msg);
this.msg = '' this.$emit("send", [formattedWord, this.username, this.icon]);
} this.msg = "";
} },
}
InsertSpaceEvery24Chars(word) {
let result = "";
for (let i = 0; i < word.length; i += 24) {
result += word.substring(i, i + 24) + " ";
}
return result.trim();
},
},
};
</script> </script>
<style> <style>
</style> </style>