Messagebar Vue コンポーネント

Messagebar Vue コンポーネントは、Framework7 のMessagebarコンポーネントを表します。

Messagebar コンポーネント

以下のコンポーネントが含まれています

f7-messagebar - メインのメッセージバー要素
f7-messagebar-sheet - メッセージバーシート要素
f7-messagebar-sheet-image - メッセージバーシートの画像アイテム
f7-messagebar-sheet-item - メッセージバーシートのアイテム
f7-messagebar-attachments - メッセージバーの添付要素
f7-messagebar-attachment - 単一のメッセージバー添付要素

Messagebar プロパティ

プロパティ	タイプ	デフォルト	説明
<f7-messagebar> プロパティ
init	boolean	true	Messagebarを初期化します
name	string		テキストエリアの "name" 属性
textarea-id	string number		テキストエリアの "id" 属性
placeholder	string	メッセージ	テキストエリアのプレースホルダーテキスト
value	string number		テキストエリアの値
readonly	boolean	false	テキストエリアの "readonly" 属性を設定します
disabled	boolean	false	テキストエリアの "disabled" 属性を設定します
send-link	string		送信リンクを有効にし、そのテキストを指定します。このプロパティは、`send-link` スロットを使用する場合は無視されます。
max-height	number		リサイズ可能なテキストエリアの最大高さを定義します
resizable	boolean	true	リサイズ可能なテキストエリアを有効にします
sheet-visible	boolean	false	メッセージバーシートを表示/アクティブにします
attachments-visible	boolean	false	メッセージバーの添付ファイルを表示/アクティブにします
resize-page	boolean	true	有効にすると、メッセージバーのテキストエリアのサイズが変更されたときにメッセージページがリサイズされます
<f7-messagebar-sheet-image> プロパティ
image	string		シートの画像URL
checked	boolean	false	このシート画像アイテムがチェックされているかどうかを示します
<f7-messagebar-attachment> プロパティ
image	string		添付ファイルの画像URL
deletable	boolean	true	添付ファイルを削除可能にするかどうかを定義します。削除可能な場合、追加の削除ボタンがレンダリングされます

Messagebar イベント

イベント	引数	説明
<f7-messagebar> イベント
change	(event)	メッセージバーのテキストエリア要素で "change" イベントが発生したときにトリガーされます
input	(event)	メッセージバーのテキストエリア要素で "input" イベントが発生したときにトリガーされます
focus	(event)	メッセージバーのテキストエリア要素で "focus" イベントが発生したときにトリガーされます
blur	(event)	メッセージバーのテキストエリア要素で "blur" イベントが発生したときにトリガーされます
submit send	(value, clear)	ユーザーがメッセージバーの「送信リンク」をクリックしたときにトリガーされます
<f7-messagebar-sheet-image> イベント
change	(event)	シートアイテムのチェックボックスの変更時にトリガーされます
<f7-messagebar-attachment> イベント
attachment:click	(event)	添付ファイルのクリック時にトリガーされます
attachment:delete	(event)	添付ファイルの削除ボタンのクリック時にトリガーされます

Messagebar スロット

Messagebar Vue コンポーネントには、カスタム要素用の追加のスロットがあります

default - 要素は <div class="toolbar-inner"> の最後に挿入されます。要素
before-area - 要素はテキストエリアの直前に挿入されます。メッセージバーの添付ファイルはここに入ります
after-area - 要素はテキストエリアの直後に挿入されます
send-link - 要素は送信リンクの中に挿入されます
before-inner - 要素は <div class="toolbar-inner"> の直前に挿入されます。要素
after-inner - 要素は <div class="toolbar-inner"> の直後に挿入されます。要素。メッセージバーシートはここに入ります
inner-start - 要素は <div class="toolbar-inner"> の先頭に挿入されます。要素
inner-end - 要素は <div class="toolbar-inner"> の最後に挿入されます。要素。default スロットと同じです

<f7-messagebar placeholder="Message" @submit="onSubmit">
  <div slot="before-inner">Before inner</div>
  <div slot="after-inner">After inner</div>
  <div slot="before-area">Before textarea</div>
  <div slot="after-area">After textarea</div>
  <f7-icon ios="f7:arrow_up_fill" md="material:send" slot="send-link"></f7-icon>
  <div>Default slot</div>
</f7-messagebar>

レンダリング先

<div class="toolbar messagebar">
  <div>Before inner</div>
  <div class="toolbar-inner">
    <div class="messagebar-area">
      <div>Before textarea</div>
      <textarea placeholder="Message"></textarea>
      <div>After textarea</div>
    </div>
    <a href="#" class="link"><i class="icon f7-icons">arrow_up_fill</i></a>
    <div>Default slot</div>
  </div>
  <div>After inner</div>
</div>

Messagebar v-model

f7-messagebar コンポーネントは、value プロパティで v-model をサポートします

<template>
  ...
  <f7-messagebar
    v-model:value="messageText"
  />
  ...
</template>
<script>
  export default {
    data() {
      messageText: '',
    },
    ...
  };
</script>

例

ここでは、メッセージとともに使用できるメッセージページの完全な例を示します

messages.vue

<template>
  <f7-page>
    <f7-navbar title="Messages"></f7-navbar>

    <f7-messagebar
      ref="messagebar"
      v-model:value="messageText"
      :placeholder="placeholder"
      :attachments-visible="attachmentsVisible"
      :sheet-visible="sheetVisible"
    >
      <template #inner-start>
        <f7-link
          icon-ios="f7:camera_fill"
          icon-md="material:camera_alt"
          @click="sheetVisible = !sheetVisible"
        />
      </template>
      <template #inner-end>
        <f7-link icon-ios="f7:arrow_up_circle_fill" icon-md="material:send" @click="sendMessage" />
      </template>
      <f7-messagebar-attachments>
        <f7-messagebar-attachment
          v-for="(image, index) in attachments"
          :key="index"
          :image="image"
          @attachment:delete="deleteAttachment(image)"
        ></f7-messagebar-attachment>
      </f7-messagebar-attachments>
      <f7-messagebar-sheet>
        <f7-messagebar-sheet-image
          v-for="(image, index) in images"
          :key="index"
          :image="image"
          :checked="attachments.indexOf(image) >= 0"
          @change="handleAttachment"
        ></f7-messagebar-sheet-image>
      </f7-messagebar-sheet>
    </f7-messagebar>

    <f7-messages>
      <f7-messages-title><b>Sunday, Feb 9,</b> 12:58</f7-messages-title>
      <f7-message
        v-for="(message, index) in messagesData"
        :key="index"
        :type="message.type"
        :image="message.image"
        :name="message.name"
        :avatar="message.avatar"
        :first="isFirstMessage(message, index)"
        :last="isLastMessage(message, index)"
        :tail="isTailMessage(message, index)"
      >
        <template v-if="message.text" #text>
          <!-- eslint-disable-next-line -->
          <span v-html="message.text"></span>
        </template>
      </f7-message>
      <f7-message
        v-if="typingMessage"
        type="received"
        :typing="true"
        :first="true"
        :last="true"
        :tail="true"
        :header="`${typingMessage.name} is typing`"
        :avatar="typingMessage.avatar"
      ></f7-message>
    </f7-messages>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Messages,
  f7MessagesTitle,
  f7Message,
  f7Messagebar,
  f7Link,
  f7MessagebarAttachments,
  f7MessagebarAttachment,
  f7MessagebarSheet,
  f7MessagebarSheetImage,
  f7ready,
  f7,
} from 'framework7-vue';
import $ from 'dom7';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Messages,
    f7MessagesTitle,
    f7Message,
    f7Messagebar,
    f7MessagebarAttachments,
    f7MessagebarAttachment,
    f7MessagebarSheet,
    f7MessagebarSheetImage,
    f7Link,
  },
  data() {
    return {
      attachments: [],
      sheetVisible: false,
      typingMessage: null,
      messageText: '',
      messagesData: [
        {
          type: 'sent',
          text: 'Hi, Kate',
        },
        {
          type: 'sent',
          text: 'How are you?',
        },
        {
          name: 'Kate',
          type: 'received',
          text: 'Hi, I am good!',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
        },
        {
          name: 'Blue Ninja',
          type: 'received',
          text: 'Hi there, I am also fine, thanks! And how are you?',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
        },
        {
          type: 'sent',
          text: 'Hey, Blue Ninja! Glad to see you ;)',
        },
        {
          type: 'sent',
          text: 'Hey, look, cutest kitten ever!',
        },
        {
          type: 'sent',
          image: 'https://cdn.framework7.io/placeholder/cats-200x260-4.jpg',
        },
        {
          name: 'Kate',
          type: 'received',
          text: 'Nice!',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
        },
        {
          name: 'Kate',
          type: 'received',
          text: 'Like it very much!',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
        },
        {
          name: 'Blue Ninja',
          type: 'received',
          text: 'Awesome!',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
        },
      ],
      images: [
        'https://cdn.framework7.io/placeholder/cats-300x300-1.jpg',
        'https://cdn.framework7.io/placeholder/cats-200x300-2.jpg',
        'https://cdn.framework7.io/placeholder/cats-400x300-3.jpg',
        'https://cdn.framework7.io/placeholder/cats-300x150-4.jpg',
        'https://cdn.framework7.io/placeholder/cats-150x300-5.jpg',
        'https://cdn.framework7.io/placeholder/cats-300x300-6.jpg',
        'https://cdn.framework7.io/placeholder/cats-300x300-7.jpg',
        'https://cdn.framework7.io/placeholder/cats-200x300-8.jpg',
        'https://cdn.framework7.io/placeholder/cats-400x300-9.jpg',
        'https://cdn.framework7.io/placeholder/cats-300x150-10.jpg',
      ],
      people: [
        {
          name: 'Kate Johnson',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
        },
        {
          name: 'Blue Ninja',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
        },
      ],
      answers: [
        'Yes!',
        'No',
        'Hm...',
        'I am not sure',
        'And what about you?',
        'May be ;)',
        'Lorem ipsum dolor sit amet, consectetur',
        'What?',
        'Are you sure?',
        'Of course',
        'Need to think about it',
        'Amazing!!!',
      ],
      responseInProgress: false,
    };
  },
  computed: {
    attachmentsVisible() {
      const self = this;
      return self.attachments.length > 0;
    },
    placeholder() {
      const self = this;
      return self.attachments.length > 0 ? 'Add comment or Send' : 'Message';
    },
  },
  mounted() {
    const self = this;
    f7ready(() => {
      self.messagebar = f7.messagebar.get(self.$refs.messagebar.$el);
    });
  },
  methods: {
    isFirstMessage(message, index) {
      const self = this;
      const previousMessage = self.messagesData[index - 1];
      if (message.isTitle) return false;
      if (
        !previousMessage ||
        previousMessage.type !== message.type ||
        previousMessage.name !== message.name
      )
        return true;
      return false;
    },
    isLastMessage(message, index) {
      const self = this;
      const nextMessage = self.messagesData[index + 1];
      if (message.isTitle) return false;
      if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name)
        return true;
      return false;
    },
    isTailMessage(message, index) {
      const self = this;
      const nextMessage = self.messagesData[index + 1];
      if (message.isTitle) return false;
      if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name)
        return true;
      return false;
    },
    deleteAttachment(image) {
      const self = this;
      const index = self.attachments.indexOf(image);
      self.attachments.splice(index, 1)[0]; // eslint-disable-line
    },
    handleAttachment(e) {
      const self = this;
      const index = $(e.target).parents('label.checkbox').index();
      const image = self.images[index];
      if (e.target.checked) {
        // Add to attachments
        self.attachments.unshift(image);
      } else {
        // Remove from attachments
        self.attachments.splice(self.attachments.indexOf(image), 1);
      }
    },
    sendMessage() {
      const self = this;
      const text = self.messageText.replace(/\n/g, '<br>').trim();
      const messagesToSend = [];
      self.attachments.forEach((attachment) => {
        messagesToSend.push({
          image: attachment,
        });
      });
      if (text.length) {
        messagesToSend.push({
          text,
        });
      }
      if (messagesToSend.length === 0) {
        return;
      }

      // Reset attachments
      self.attachments = [];
      // Hide sheet
      self.sheetVisible = false;
      // Clear area
      self.messageText = '';
      // Focus area
      if (text.length) self.messagebar.focus();
      // Send message
      self.messagesData.push(...messagesToSend);

      // Mock response
      if (self.responseInProgress) return;
      self.responseInProgress = true;
      setTimeout(() => {
        const answer = self.answers[Math.floor(Math.random() * self.answers.length)];
        const person = self.people[Math.floor(Math.random() * self.people.length)];
        self.typingMessage = {
          name: person.name,
          avatar: person.avatar,
        };
        setTimeout(() => {
          self.messagesData.push({
            text: answer,
            type: 'received',
            name: person.name,
            avatar: person.avatar,
          });
          self.typingMessage = null;
          self.responseInProgress = false;
        }, 4000);
      }, 1000);
    },
  },
};
</script>

このドキュメントを改善する

このページについて

Messagebar コンポーネント
Messagebar プロパティ
Messagebar イベント
Messagebar スロット
Messagebar v-model
例