Messages Component

    Messages Vue component represents Messages component.

    • - main Messages container
    • **f7-message** - single message element
    • **f7-messages-title** - single messages title element

    Messages Properties

    Messages Events

    Single message Vue component (<f7-message>) has additional slots for custom elements:

    • **default** - element will be inserted as a child of <div class="message-bubble"> element in the end
    • **start** - element will be inserted in the beginning and direct child of main message element <div class="message">
    • **end** - element will be inserted in the end and direct child of main message element <div class="message">
    • **content-start** - element will be inserted in the beginning and direct child of the <div class="message-content"> element
    • **content-end** - element will be inserted in the end and direct child of the <div class="message-content"> element
    • **bubble-start** - element will be inserted in the beginning and direct child of the <div class="message-bubble"> element
    • **bubble-end** - element will be inserted in the end and direct child of the <div class="message-bubble"> element. Same as **default** slot
    • **header** - element will be inserted in message header
    • **footer** - element will be inserted in message footer
    • **text** - element will be inserted in message text
    • **name** - element will be inserted in message name
    • **image** - element will be inserted in message image (supposed tp be an <img> element)
    • **text-header** - element will be inserted in message text header
    • **text-footer** - element will be inserted in message text footer

    Access To Messages Instance

    If you use automatic initalization to init Messages (with init:true prop) and need to use you can access its initialized instance by accessing **.f7Messages** component’s property.

    1. <template>
    2.   <f7-page>
    3.     <f7-navbar title="Messsages"></f7-navbar>
    5.     <f7-messagebar
    6.       :placeholder="placeholder"
    7.       ref="messagebar"
    8.       :attachments-visible="attachmentsVisible"
    9.       :sheet-visible="sheetVisible"
    10.     >
    11.       <f7-link
    12.         icon-ios="f7:camera_fill"
    13.         icon-md="material:camera_alt"
    14.         slot="inner-start"
    15.         @click="sheetVisible = !sheetVisible"
    16.       ></f7-link>
    17.       <f7-link
    18.         icon-ios="f7:arrow_up_fill"
    19.         icon-md="material:send"
    20.         slot="inner-end"
    21.         @click="sendMessage"
    22.       ></f7-link>
    23.       <f7-messagebar-attachments>
    24.         <f7-messagebar-attachment
    25.           v-for="(image, index) in attachments"
    26.           :key="index"
    27.           :image="image"
    28.           @attachment:delete="deleteAttachment(image)"
    29.         ></f7-messagebar-attachment>
    30.       </f7-messagebar-attachments>
    31.       <f7-messagebar-sheet>
    32.         <f7-messagebar-sheet-image
    33.           v-for="(image, index) in images"
    34.           :key="index"
    35.           :image="image"
    36.           :checked="attachments.indexOf(image) >= 0"
    37.           @change="handleAttachment"
    38.         ></f7-messagebar-sheet-image>
    39.       </f7-messagebar-sheet>
    40.     </f7-messagebar>
    42.     <f7-messages ref="messages">
    43.       <f7-messages-title><b>Sunday, Feb 9,</b> 12:58</f7-messages-title>
    44.       <f7-message
    45.         v-for="(message, index) in messagesData"
    46.         :key="index"
    47.         :type="message.type"
    48.         :image="message.image"
    49.         :name="message.name"
    50.         :avatar="message.avatar"
    51.         :first="isFirstMessage(message, index)"
    52.         :last="isLastMessage(message, index)"
    53.         :tail="isTailMessage(message, index)"
    54.       >
    55.         <span slot="text" v-if="message.text" v-html="message.text"></span>
    56.       </f7-message>
    57.       <f7-message v-if="typingMessage"
    58.         type="received"
    59.         :typing="true"
    60.         :first="true"
    61.         :last="true"
    62.         :tail="true"
    63.         :header="`${typingMessage.name} is typing`"
    64.         :avatar="typingMessage.avatar"
    65.       ></f7-message>
    66.     </f7-messages>
    67.   </f7-page>
    68. </template>
    69. <script>
    70.     data() {
    72.         attachments: [],
    73.         sheetVisible: false,
    74.         typingMessage: null,
    75.         messagesData: [
    76.           {
    77.             type: 'sent',
    78.             text: 'Hi, Kate',
    79.           },
    80.           {
    81.             type: 'sent',
    82.             text: 'How are you?',
    83.           },
    84.           {
    85.             name: 'Kate',
    86.             type: 'received',
    87.             text: 'Hi, I am good!',
    88.             avatar: 'http://lorempixel.com/100/100/people/9',
    89.           },
    90.           {
    91.             name: 'Blue Ninja',
    92.             type: 'received',
    93.             text: 'Hi there, I am also fine, thanks! And how are you?',
    94.             avatar: 'http://lorempixel.com/100/100/people/7',
    95.           },
    96.           {
    97.             type: 'sent',
    98.             text: 'Hey, Blue Ninja! Glad to see you ;)',
    99.           },
    100.           {
    101.             type: 'sent',
    102.             text: 'Hey, look, cutest kitten ever!',
    103.           },
    104.           {
    105.             type: 'sent',
    106.             image: 'http://lorempixel.com/200/260/cats/4/',
    108.           },
    109.           {
    110.             name: 'Kate',
    111.             type: 'received',
    112.             text: 'Nice!',
    113.             avatar: 'http://lorempixel.com/100/100/people/9',
    114.           },
    115.           {
    116.             name: 'Kate',
    117.             type: 'received',
    118.             text: 'Like it very much!',
    119.             avatar: 'http://lorempixel.com/100/100/people/9',
    120.           },
    121.           {
    122.             name: 'Blue Ninja',
    123.             type: 'received',
    124.             text: 'Awesome!',
    125.             avatar: 'http://lorempixel.com/100/100/people/7',
    126.           },
    127.         ],
    128.         images: [
    129.           'http://lorempixel.com/300/300/cats/1/',
    130.           'http://lorempixel.com/200/300/cats/2/',
    131.           'http://lorempixel.com/400/300/cats/3/',
    132.           'http://lorempixel.com/300/150/cats/4/',
    133.           'http://lorempixel.com/150/300/cats/5/',
    134.           'http://lorempixel.com/300/300/cats/6/',
    135.           'http://lorempixel.com/300/300/cats/7/',
    136.           'http://lorempixel.com/200/300/cats/8/',
    137.           'http://lorempixel.com/400/300/cats/9/',
    138.           'http://lorempixel.com/300/150/cats/10/',
    139.         ],
    140.         people: [
    141.           {
    142.             name: 'Kate Johnson',
    143.             avatar: 'http://lorempixel.com/100/100/people/9',
    144.           },
    145.           {
    146.             name: 'Blue Ninja',
    147.             avatar: 'http://lorempixel.com/100/100/people/7',
    148.           },
    149.         ],
    150.         answers: [
    151.           'Yes!',
    152.           'No',
    153.           'Hm...',
    154.           'I am not sure',
    155.           'And what about you?',
    156.           'May be ;)',
    157.           'Lorem ipsum dolor sit amet, consectetur',
    158.           'What?',
    159.           'Are you sure?',
    160.           'Of course',
    161.           'Need to think about it',
    162.           'Amazing!!!',
    163.         ],
    164.         responseInProgress: false,
    165.       };
    166.     },
    167.     computed: {
    168.       attachmentsVisible() {
    169.         const self = this;
    170.         return self.attachments.length > 0;
    171.       },
    172.       placeholder() {
    174.       },
    175.     },
    176.     mounted() {
    177.       const self = this;
    178.       self.$f7ready(() => {
    179.         self.messagebar = self.$refs.messagebar.f7Messagebar;
    180.         self.messages = self.$refs.messages.f7Messages;
    181.       });
    182.     },
    183.     methods: {
    184.       isFirstMessage(message, index) {
    185.         const self = this;
    186.         const previousMessage = self.messagesData[index - 1];
    187.         if (message.isTitle) return false;
    188.         if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
    189.         return false;
    190.       },
    191.       isLastMessage(message, index) {
    192.         const self = this;
    193.         const nextMessage = self.messagesData[index + 1];
    194.         if (message.isTitle) return false;
    195.         if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
    196.         return false;
    197.       },
    198.       isTailMessage(message, index) {
    199.         const self = this;
    200.         const nextMessage = self.messagesData[index + 1];
    201.         if (message.isTitle) return false;
    202.         if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
    203.         return false;
    204.       },
    205.       deleteAttachment(image) {
    206.         const self = this;
    207.         const index = self.attachments.indexOf(image);
    208.         self.attachments.splice(index, 1)[0]; // eslint-disable-line
    209.       },
    210.       handleAttachment(e) {
    211.         const self = this;
    212.         const index = self.$$(e.target).parents('label.checkbox').index();
    213.         const image = self.images[index];
    214.         if (e.target.checked) {
    215.           // Add to attachments
    216.           self.attachments.unshift(image);
    217.         } else {
    218.           // Remove from attachments
    219.           self.attachments.splice(self.attachments.indexOf(image), 1);
    220.         }
    221.       },
    222.       sendMessage() {
    223.         const self = this;
    224.         const text = self.messagebar.getValue().replace(/\n/g, '<br>').trim();
    225.         const messagesToSend = [];
    226.         self.attachments.forEach((attachment) => {
    227.           messagesToSend.push({
    228.             image: attachment,
    229.           });
    230.         });
    231.         if (text.trim().length) {
    232.           messagesToSend.push({
    233.             text,
    234.           });
    235.         }
    236.         if (messagesToSend.length === 0) {
    237.           return;
    238.         }
    240.         // Reset attachments
    241.         self.attachments = [];
    242.         // Hide sheet
    243.         self.sheetVisible = false;
    244.         // Clear area
    245.         self.messagebar.clear();
    246.         // Focus area
    247.         if (text.length) self.messagebar.focus();
    248.         // Send message
    249.         self.messagesData.push(...messagesToSend);
    251.         // Mock response
    252.         if (self.responseInProgress) return;
    253.         self.responseInProgress = true;
    254.         setTimeout(() => {
    255.           const answer = self.answers[Math.floor(Math.random() * self.answers.length)];
    256.           const person = self.people[Math.floor(Math.random() * self.people.length)];
    257.           self.typingMessage = {
    258.             name: person.name,
    259.             avatar: person.avatar,
    260.           };
    261.           setTimeout(() => {
    262.             self.messagesData.push({
    263.               text: answer,
    264.               type: 'received',
    265.               name: person.name,
    266.               avatar: person.avatar,
    267.             });
    268.             self.typingMessage = null;
    269.             self.responseInProgress = false;
    270.           }, 4000);
    271.         }, 1000);
    272.       },
    273.     },
    274.   };
    275. </script>