Messages Component

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