Messagebar - 图1

Messagebar Vue Component

Messagebar Vue component represents Framework7’s Messagebar component.

Messagebar Components

There are following components included:

  • f7-messagebar - main messagebar element
  • f7-messagebar-sheet - messagebar sheet element
  • f7-messagebar-sheet-image - messagebar sheet image item
  • f7-messagebar-sheet-item - messagebar sheet item
  • f7-messagebar-attachments - messagebar attachments element
  • f7-messagebar-attachment - single messagebar attachment element

Messagebar - 图2

Messagebar Properties

PropTypeDefaultDescription
<f7-messagebar> properties
initbooleantrueInitializes Messagebar
namestringTextarea “name” attribute
textarea-idstring
number		Textarea “id” attribute
placeholderstringMessageTextarea placeholder text
valuestring
number		Textarea value
readonlybooleanfalseSets “readonly” textarea attribute
disabledbooleanfalseSets “disbled” textarea attribute
send-linkstringEnables Send link and specifies its text. This property will be ignored in case you use send-link slot
max-heightnumberDefines resizeable textarea max height
resizableboleantrueEnables resizeable textarea
sheet-visiblebooleanfalseMakes messagebar sheet visible/active
attachments-visiblebooleanfalseMakes messagebar attachments visible/active
resize-pagebooleantrueWhen enabled, it will resize messages page when messagebar textarea size changed
<f7-messagebar-sheet-image> properties
imagestringSheet image URL
checkedbooleanfalseIndicates whether this sheet image-item is checked or not
<f7-messagebar-attachment> properties
imagestringAttachment image URL
deletablebooleantrueDefines whether the attachment is deletable or not. In case of deletable the additional delete button will be rendered

Messagebar Methods

<f7-messagebar> methods
.clear()Clear textarea and update/reset its size
.setValue(newValue)Set messagebar textarea value/text
.getValue()Return messagebar textarea value
.resize()Force Messagebar to resize messages page depending on messagebar height/size
.focus()Focus messagebar textarea
.blur()Remove focus from messagebar textarea

Messagebar Events

EventArgumentsDescription
<f7-messagebar> events
change(event)Event will be triggered when “change” event occurs on messagebar textarea element
input(event)Event will be triggered when “input” event occurs on messagebar textarea element
focus(event)Event will be triggered when “focus” event occurs on messagebar textarea element
blur(event)Event will be triggered when “blur” event occurs on messagebar textarea element
submit
send		(value, clear)Event will be triggered when user clicks on messagebar “send link”
<f7-messagebar-sheet-image> events
change(event)Event will be triggered on sheet item checkbox change
<f7-messagebar-attachment> events
attachment:click(event)Event will be triggered on attachment click
attachment:delete(event)Event will be triggered on attachment delete button click

Messagebar Slots

Messagebar Vue component has additional slots for custom elements:

  • default - element will be inserted in the end of <div class="toolbar-inner">. element
  • before-area - element will be inserted right before textarea. Messagebar attachments go here
  • after-area - element will be inserted right after textarea
  • send-link - element will be inserted inside of send link
  • before-inner - element will be inserted right before <div class="toolbar-inner">. element
  • after-inner - element will be inserted right after <div class="toolbar-inner">. element. Messagebar sheet goes here
  • inner-start - element will be inserted in the beginning of <div class="toolbar-inner">. element
  • inner-end - element will be inserted in the end of <div class="toolbar-inner">. element. Same as default slot
  1. <f7-messagebar placeholder="Message" @submit="onSubmit">
  2.   <div slot="before-inner">Before inner</div>
  3.   <div slot="after-inner">After inner</div>
  4.   <div slot="before-area">Before textarea</div>
  5.   <div slot="after-area">After textarea</div>
  6.   <f7-icon ios="f7:arrow_up_fill" aurora="f7:arrow_up_fill" md="material:send" slot="send-link"></f7-icon>
  7.   <div>Default slot</div>
  8. </f7-messagebar>

Renders to:

  1. <div class="toolbar messagebar">
  2.   <div>Before inner</div>
  3.   <div class="toolbar-inner">
  4.     <div class="messagebar-area">
  5.       <div>Before textarea</div>
  6.       <textarea placeholder="Message"></textarea>
  7.       <div>After textarea</div>
  8.     </div>
  9.     <a href="#" class="link"><i class="icon f7-icons">arrow_up_fill</i></a>
  10.     <div>Default slot</div>
  11.   </div>
  12.   <div>After inner</div>
  13. </div>

Access To Messagebar Instance

If you use automatic initalization to init Messagebar (with init:true prop) and need to use its Methods and Properties you can access its initialized instance by accessing .f7Messagebar component’s property.

Examples

Here is how the full example of Messages page where it can be used together with Messages:

  1. <template>
  2.   <f7-page>
  3.     <f7-navbar title="Messages"></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. </template>
  71. <script>
  72.   export default {
  73.     data() {
  74.       return {
  75.         attachments: [],
  76.         sheetVisible: false,
  77.         typingMessage: null,
  78.         messagesData: [
  79.           {
  80.             type: 'sent',
  81.             text: 'Hi, Kate',
  82.           },
  83.           {
  84.             type: 'sent',
  85.             text: 'How are you?',
  86.           },
  87.           {
  88.             name: 'Kate',
  89.             type: 'received',
  90.             text: 'Hi, I am good!',
  91.             avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
  92.           },
  93.           {
  94.             name: 'Blue Ninja',
  95.             type: 'received',
  96.             text: 'Hi there, I am also fine, thanks! And how are you?',
  97.             avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
  98.           },
  99.           {
  100.             type: 'sent',
  101.             text: 'Hey, Blue Ninja! Glad to see you ;)',
  102.           },
  103.           {
  104.             type: 'sent',
  105.             text: 'Hey, look, cutest kitten ever!',
  106.           },
  107.           {
  108.             type: 'sent',
  109.             image: 'https://cdn.framework7.io/placeholder/cats-200x260-4.jpg',
  111.           },
  112.           {
  113.             name: 'Kate',
  114.             type: 'received',
  115.             text: 'Nice!',
  116.             avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
  117.           },
  118.           {
  119.             name: 'Kate',
  120.             type: 'received',
  121.             text: 'Like it very much!',
  122.             avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
  123.           },
  124.           {
  125.             name: 'Blue Ninja',
  126.             type: 'received',
  127.             text: 'Awesome!',
  128.             avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
  129.           },
  130.         ],
  131.         images: [
  132.           'https://cdn.framework7.io/placeholder/cats-300x300-1.jpg',
  133.           'https://cdn.framework7.io/placeholder/cats-200x300-2.jpg',
  134.           'https://cdn.framework7.io/placeholder/cats-400x300-3.jpg',
  135.           'https://cdn.framework7.io/placeholder/cats-300x150-4.jpg',
  136.           'https://cdn.framework7.io/placeholder/cats-150x300-5.jpg',
  137.           'https://cdn.framework7.io/placeholder/cats-300x300-6.jpg',
  138.           'https://cdn.framework7.io/placeholder/cats-300x300-7.jpg',
  139.           'https://cdn.framework7.io/placeholder/cats-200x300-8.jpg',
  140.           'https://cdn.framework7.io/placeholder/cats-400x300-9.jpg',
  141.           'https://cdn.framework7.io/placeholder/cats-300x150-10.jpg',
  142.         ],
  143.         people: [
  144.           {
  145.             name: 'Kate Johnson',
  146.             avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
  147.           },
  148.           {
  149.             name: 'Blue Ninja',
  150.             avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
  151.           },
  152.         ],
  153.         answers: [
  154.           'Yes!',
  155.           'No',
  156.           'Hm...',
  157.           'I am not sure',
  158.           'And what about you?',
  159.           'May be ;)',
  160.           'Lorem ipsum dolor sit amet, consectetur',
  161.           'What?',
  162.           'Are you sure?',
  163.           'Of course',
  164.           'Need to think about it',
  165.           'Amazing!!!',
  166.         ],
  167.         responseInProgress: false,
  168.       };
  169.     },
  170.     computed: {
  171.       attachmentsVisible() {
  172.         const self = this;
  173.         return self.attachments.length > 0;
  174.       },
  175.       placeholder() {
  176.         const self = this;
  177.         return self.attachments.length > 0 ? 'Add comment or Send' : 'Message';
  178.       },
  179.     },
  180.     mounted() {
  181.       const self = this;
  182.       self.$f7ready(() => {
  183.         self.messagebar = self.$refs.messagebar.f7Messagebar;
  184.         self.messages = self.$refs.messages.f7Messages;
  185.       });
  186.     },
  187.     methods: {
  188.       isFirstMessage(message, index) {
  189.         const self = this;
  190.         const previousMessage = self.messagesData[index - 1];
  191.         if (message.isTitle) return false;
  192.         if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
  193.         return false;
  194.       },
  195.       isLastMessage(message, index) {
  196.         const self = this;
  197.         const nextMessage = self.messagesData[index + 1];
  198.         if (message.isTitle) return false;
  199.         if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
  200.         return false;
  201.       },
  202.       isTailMessage(message, index) {
  203.         const self = this;
  204.         const nextMessage = self.messagesData[index + 1];
  205.         if (message.isTitle) return false;
  206.         if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
  207.         return false;
  208.       },
  209.       deleteAttachment(image) {
  210.         const self = this;
  211.         const index = self.attachments.indexOf(image);
  212.         self.attachments.splice(index, 1)[0]; // eslint-disable-line
  213.       },
  214.       handleAttachment(e) {
  215.         const self = this;
  216.         const index = self.$$(e.target).parents('label.checkbox').index();
  217.         const image = self.images[index];
  218.         if (e.target.checked) {
  219.           // Add to attachments
  220.           self.attachments.unshift(image);
  221.         } else {
  222.           // Remove from attachments
  223.           self.attachments.splice(self.attachments.indexOf(image), 1);
  224.         }
  225.       },
  226.       sendMessage() {
  227.         const self = this;
  228.         const text = self.messagebar.getValue().replace(/\n/g, '<br>').trim();
  229.         const messagesToSend = [];
  230.         self.attachments.forEach((attachment) => {
  231.           messagesToSend.push({
  232.             image: attachment,
  233.           });
  234.         });
  235.         if (text.trim().length) {
  236.           messagesToSend.push({
  237.             text,
  238.           });
  239.         }
  240.         if (messagesToSend.length === 0) {
  241.           return;
  242.         }
  244.         // Reset attachments
  245.         self.attachments = [];
  246.         // Hide sheet
  247.         self.sheetVisible = false;
  248.         // Clear area
  249.         self.messagebar.clear();
  250.         // Focus area
  251.         if (text.length) self.messagebar.focus();
  252.         // Send message
  253.         self.messagesData.push(...messagesToSend);
  255.         // Mock response
  256.         if (self.responseInProgress) return;
  257.         self.responseInProgress = true;
  258.         setTimeout(() => {
  259.           const answer = self.answers[Math.floor(Math.random() * self.answers.length)];
  260.           const person = self.people[Math.floor(Math.random() * self.people.length)];
  261.           self.typingMessage = {
  262.             name: person.name,
  263.             avatar: person.avatar,
  264.           };
  265.           setTimeout(() => {
  266.             self.messagesData.push({
  267.               text: answer,
  268.               type: 'received',
  269.               name: person.name,
  270.               avatar: person.avatar,
  271.             });
  272.             self.typingMessage = null;
  273.             self.responseInProgress = false;
  274.           }, 4000);
  275.         }, 1000);
  276.       },
  277.     },
  278.   };
  279. </script>

← Menu

Messages →