Как поменять место элемента из списка?
Как сделать так ,чтобы первый элемент из списка начиналcя снизу, а не сверху блока ?
const app = new Vue({
el: '#app',
data() {
return {
showInput: true, // Отвечает за показ ввода текста
showChat: true, // Отвечает за показ нашего чата
chatMessages: [], // список сообщений в чате
pastMsgchat: [],
inputText: '', // Тут хранится наш текст, который мы вводим в инпут
active: true, // Отвечает за возможность писать в чат,
}
},
methods: {
push(msg) {
if (this.chatMessages.length >= 50) {
this.chatMessages.pop();
}
let valueback = 'chat__mesage';
let valueicon = null;
let valuesizeicon = null;
switch (msg.substring(0, 4)) {
case '[00]':
msg = msg.substr(4);
break;
case '[01]':
valueicon = 'img/iconme.svg';
valuesizeicon = 'iconme';
msg = msg.substr(4);
break;
case '[02]':
valueicon = 'img/iconDO.svg';
valuesizeicon = 'icondo';
msg = msg.substr(4);
break;
case '[03]':
valueicon = 'img/iconTRY.svg';
valuesizeicon = 'icontry';
msg = msg.substr(4);
break;
case '[04]':
valueicon = 'img/iconOOC.svg';
valuesizeicon = 'iconooc';
msg = msg.substr(4);
break;
case '[05]':
valueback = 'chat__mesage-info';
valueicon = 'img/iconINFO.svg';
valuesizeicon = 'iconinfo';
msg = msg.substr(4);
break;
case '[06]':
valueback = 'chat__mesage-ban';
valueicon = 'img/iconBAN.svg';
valuesizeicon = 'iconban';
msg = msg.substr(4);
break;
case '[07]':
valueback = 'chat__mesage-warn';
valueicon = 'img/iconWARN.svg';
valuesizeicon = 'iconwarn';
msg = msg.substr(4);
break;
case '[08]':
valueback = 'chat__mesage-admin';
valueicon = 'img/iconADMIN.svg';
valuesizeicon = 'iconadmin';
msg = msg.substr(4);
break;
case '[09]':
valueback = 'chat__mesage-news';
valueicon = 'img/iconNEWS.svg';
valuesizeicon = 'iconnews';
msg = msg.substr(4);
break;
case '[10]':
valueback = 'chat__mesage-organization';
valueicon = 'img/iconORGANIZATION.svg';
valuesizeicon = 'iconorganization';
msg = msg.substr(4);
break;
case '[11]':
valueback = 'chat__mesage-state';
valueicon = 'img/iconSTATE.svg';
valuesizeicon = 'iconstate';
msg = msg.substr(4);
break;
case '[12]':
valueback = 'chat__mesage-leader';
valueicon = 'img/iconLEADER.svg';
valuesizeicon = 'iconleader';
msg = msg.substr(4);
break;
case '[13]':
valueback = 'chat__mesage-adminchat';
valueicon = 'img/iconADMINchat.svg';
valuesizeicon = 'iconadminchat';
msg = msg.substr(4);
break;
default:
break;
}
let value = {text: msg, back: valueback, icon: valueicon, sizeicon: valuesizeicon};
this.chatMessages.unshift(value);
},
// показать / убрать интуп ввода текста
enableChatInput(enable) {
if (!this.active && enable) {
return;
}
if (enable !== this.showInput) {
mp.invoke("focus", enable);
mp.invoke("setTypingInChatState", enable);
this.showInput = enable;
this.inputText = '';
enable && this.$nextTick().then(() => this.$refs.input.focus());
}
},
// включить / отключить возможность писать в чат
activate(toggle) {
if (!toggle && this.showInput) {
alert('удалить')
this.enableChatInput(false);
}
this.active = toggle;
},
// показать / скрыть чат
show(toggle) {
if (!toggle && this.showInput) {
this.enableChatInput(false);
}
this.showChat = toggle;
}
},
// тут можно запушить в чат и посмотреть
mounted() {
// Включаем чат
this.showChat = true;
this.push("past message");
this.push("hellow");
}
});
body {
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
body, html {
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
::-webkit-scrollbar {
width: 0;
}
.chat {
width: 500px;
margin-left: 14px;
margin-top: 16px;
}
.chat__allmesages {
width: 100%;
height: 315px;
margin-bottom: 10px;
list-style-type: none;
overflow: auto;
justify-content: start;
}
.chat__mesage {
margin-right: auto;
background: rgba(0, 0, 0, 0.4);
border-radius: get-vh(8px);
padding: get-vh(4px) get-vh(6px) get-vh(4px) get-vh(5px);
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: get-vh(15px);
line-height: get-vh(21px);
color: #FFFFFF;
width: fit-content;
margin-top: get-vh(5px);
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
}
.chat__msg {
width: 500px;
height: 30px;
background: rgba(0, 0, 0, 0.6);
border-radius: 10px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 15px;
line-height: 18px;
display: flex;
align-items: center;
color: #FFFFFF;
padding-left: 10px;
padding-right: 30px;
position: absolute;
top: 341px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="wrapper" id="app">
<div v-if="showChat" class="chat">
<ul class="chat__allmesages">
<li v-for="message in chatMessages" :class="message.back">
<p><img :src="message.icon" :class="message.sizeicon">{{ message.text }}</p>
</li>
</ul>
<input v-show="showInput" v-model="inputText" :maxlength="max" class="chat__msg" type="text" ref="myInput" spellcheck="false"
@input="(e) => {
switch(e.target.value){
case '/o ':
e.target.value = '';
curenttype = '/o ';
activeLink = 2;
break;
case '/st ':
e.target.value = '';
curenttype = '/st ';
activeLink = 3;
break;
case '/led ':
e.target.value = '';
curenttype = '/led ';
activeLink = 4;
break;
case '/a ':
e.target.value = '';
curenttype = '/a ';
activeLink = 5;
break;
case '/me ':
e.target.value = '';
curenttype = '/me ';
activeLink = 6;
break;
case '/do ':
e.target.value = '';
curenttype = '/do ';
activeLink = 7;
break;
case '/try ':
e.target.value = '';
curenttype = '/try ';
activeLink = 8;
break;
case '/f ':
e.target.value = '';
curenttype = '/f ';
activeLink = 9;
break;
case '/admin ':
e.target.value = '';
curenttype = '/admin ';
activeLink = 10;
break;
}
inputText = e.target.value;
}">
</div>
</div>
Ответы (1 шт):
Автор решения: SwaD
→ Ссылка
Комментарии пока писать не могу, поэтому сразу тут.
Единственный список, который я нашел, это список сообщений чата.
Код рендера здесь не представлен, поэтому предположу, что надо строку
this.chatMessages.push(value);
заменить на
this.chatMessages.unshift(value);
Тогда будут добавляться новые сообщения в начало, а старые удаляться с конца