Messages Vue component represents Messages component.
<f7-messages>
<f7-message name="John" text="Hello, Kate!" type="received"></f7-message>
<f7-message name="Kate" text="Hi, John!" type="sent"></f7-message>
</f7-messages>
Renders to:
<div class="messages">
<div class="message message-received">
<div class="message-name">John</div>
<div class="message-text">Hello, Kate!</div>
</div>
<div class="message message-sent">
<div class="message-name">Kate</div>
<div class="message-text">Hi, John!</div>
</div>
</div>
Here is how it can be used in Vue component along with Message Bar:
<template>
<f7-messages>
<f7-message v-for="message in messages"
:text="message.text"
:label="message.label"
:date="message.date"
:name="message.name"
:avatar="message.avatar"
:type="message.type"
:day="message.day"
:time="message.time"
@click="onClick"
@click:text="onTextClick"
@click:name="onNameClick"
@click:avatar="onAvatarClick"
></f7-message>
</f7-messages>
<f7-messagebar placeholder="Message" send-link="Send" @submit="onSubmit"></f7-messagebar>
</template>
<script>
export default {
data: function () {
return {
name: 'Vladimir',
avatar: 'path/to/avatar-1.jpg',
messages: [
{
day: 'Wendesday',
time: '13:34'
},
{
name: 'Vladimir',
text: 'How are you?',
label: 'Sent in good mood :)',
avatar: 'path/to/avatar-1.jpg',
date: 'Yesterday 13:34'
},
{
name: 'Jane',
text: 'I\'m good, thank you!',
type: 'received',
avatar: 'path/to/avatar-2.jpg',
date: 'Yesterday at 13:50'
}
]
}
},
methods: {
onClick: function (event) {
console.log('message click');
},
onAvatarClick: function () {
console.log('avatar-click');
},
onTextClick: function () {
console.log('text-click');
},
onNameClick: function () {
console.log('name-click');
},
onSubmit: function (text, clear) {
if (text.trim().length === 0) return;
this.messages.push({
name: this.name,
avatar: this.avatar,
text: text,
date: (function () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
return hours + ':' + minutes;
})()
});
// Clear Message Bar
clear();
}
}
}
</script>
Prop | Type | Default | Description |
---|---|---|---|
<f7-messages> properties | |||
init | boolean | true | Initializes Messages component |
autoLayout | boolean | true | Enable Auto Layout to add all required additional classes (like "message-pic", "message-with-avatar", "message-with-tail", etc) to each message automatically |
newMessagesFirst | boolean | false | Enable if you want to use new messages on top, instead of having them on bottom |
scrollMessages | boolean | true | Enable/disable messages autoscrolling when adding new message |
scrollMessagesOnlyOnEdge | boolean | false | If enabled then messages autoscrolling will happen only when user is on top/bottom of the messages view |
messages | array | Array with initial messages. Each message in array should be presented as object with message parameters | |
<f7-message> properties | |||
type | string | "sent" | Message type: "sent" (default) or "received" |
text | string | Single message text | |
avatar | string | Single message user's avatar URL | |
name | string | Single message user's name | |
label | string | Single message label | |
date | string | Single message date | |
day | string | Conversation day | |
time | string | Conversation time | |
first | boolean | true | Defines that the message is first in the conversation |
last | boolean | true | Defines that the message is last in the conversation |
.addMessage(messageParameters, method, animate); |
Add new message to the end or to the beginning depending on method parameter
|
.appendMessage(messageParameters, animate); | Add new message to the end (to the bottom) |
.prependMessage(messageParameters, animate); | Add new message to the beginning (to the top) |
.addMessages(messages, method, animate); | Add multiple messages per once.
|
.removeMessage(message); | Remove message
|
.removeMessages(messages); | Remove multiple messages
|
.scroll(); | Scroll messages to top/bottom depending on newMessagesFirst parameter |
.layout(); | Apply messages auto layout |
.clean(); | Clean/remove all the messages |
Event | Description |
---|---|
<f7-message> events | |
click | Event will be triggered when user clicks on message bubble |
click:name | Event will be triggered when user clicks on message user's name |
click:text | Event will be triggered when user clicks on message text |
click:avatar | Event will be triggered when user clicks on message user's avatar |
If you use automatic initalization to init Messages (with init:true
prop) and need to use its Methods and Properties you can access its initialized instance by accessing .f7Messages
component's property.