Language: ENCN

Messages Component

Messages Vue component represents Messages component.

Usage examples

<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>

With Messagebar

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>

Properties

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

Events

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

Access To Initialized Instance

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.