Toast Vue Component

<template>
  <f7-page @page:beforeremove="onPageBeforeRemove" @page:beforeout="onPageBeforeOut">
    <f7-navbar title="Toast"></f7-navbar>
    <f7-block strong-ios outline-ios>
      <p>Toasts provide brief feedback about an operation through a message on the screen.</p>
      <p>
        <f7-button fill @click="showToastBottom">Toast on Bottom</f7-button>
      </p>
      <p>
        <f7-button fill @click="showToastTop">Toast on Top</f7-button>
      </p>
      <p>
        <f7-button fill @click="showToastCenter">Toast on Center</f7-button>
      </p>
      <p>
        <f7-button fill @click="showToastIcon">Toast with icon</f7-button>
      </p>
      <p>
        <f7-button fill @click="showToastLargeMessage">Toast with large message</f7-button>
      </p>
      <p>
        <f7-button fill @click="showToastWithButton">Toast with close button</f7-button>
      </p>
      <p>
        <f7-button fill @click="showToastWithCustomButton">Toast with custom button</f7-button>
      </p>
      <p>
        <f7-button fill @click="showToastWithCallback">Toast with callback on close</f7-button>
      </p>
    </f7-block>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7Block, f7Button, f7, theme } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Block,
    f7Button,
  },
  methods: {
    showToastBottom() {
      const self = this;
      // Create toast
      if (!self.toastBottom) {
        self.toastBottom = f7.toast.create({
          text: 'This is default bottom positioned toast',
          closeTimeout: 2000,
        });
      }
      // Open it
      self.toastBottom.open();
    },
    showToastTop() {
      const self = this;
      // Create toast
      if (!self.toastTop) {
        self.toastTop = f7.toast.create({
          text: 'Top positioned toast',
          position: 'top',
          closeTimeout: 2000,
        });
      }
      // Open it
      self.toastTop.open();
    },
    showToastCenter() {
      const self = this;
      // Create toast
      if (!self.toastCenter) {
        self.toastCenter = f7.toast.create({
          text: "I'm on center",
          position: 'center',
          closeTimeout: 2000,
        });
      }
      // Open it
      self.toastCenter.open();
    },
    showToastIcon() {
      const self = this;
      // Create toast
      if (!self.toastIcon) {
        self.toastIcon = f7.toast.create({
          icon: theme.ios
            ? '<i class="f7-icons">star_fill</i>'
            : '<i class="material-icons">star</i>',
          text: "I'm on center",
          position: 'center',
          closeTimeout: 2000,
        });
      }
      // Open it
      self.toastIcon.open();
    },
    showToastLargeMessage() {
      const self = this;
      // Create toast
      if (!self.toastLargeMessage) {
        self.toastLargeMessage = f7.toast.create({
          text: 'This toast contains a lot of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quae, ab. Delectus amet optio facere autem sapiente quisquam beatae culpa dolore.',
          closeTimeout: 2000,
        });
      }
      // Open it
      self.toastLargeMessage.open();
    },
    showToastWithButton() {
      const self = this;
      // Create toast
      if (!self.toastWithButton) {
        self.toastWithButton = f7.toast.create({
          text: 'Toast with additional close button',
          closeButton: true,
        });
      }
      // Open it
      self.toastWithButton.open();
    },
    showToastWithCustomButton() {
      const self = this;
      // Create toast
      if (!self.toastWithCustomButton) {
        self.toastWithCustomButton = f7.toast.create({
          text: 'Custom close button',
          closeButton: true,
          closeButtonText: 'Close Me',
          closeButtonColor: 'red',
        });
      }
      // Open it
      self.toastWithCustomButton.open();
    },
    showToastWithCallback() {
      const self = this;
      // Create toast
      if (!self.toastWithCallback) {
        self.toastWithCallback = f7.toast.create({
          text: 'Callback on close',
          closeButton: true,
          on: {
            close() {
              f7.dialog.alert('Toast closed');
            },
          },
        });
      }
      // Open it
      self.toastWithCallback.open();
    },
    onPageBeforeOut() {
      f7.toast.close();
    },
    onPageBeforeRemove() {
      const self = this;
      // Destroy toasts when page removed
      if (self.toastBottom) self.toastBottom.destroy();
      if (self.toastTop) self.toastTop.destroy();
      if (self.toastCenter) self.toastCenter.destroy();
      if (self.toastIcon) self.toastIcon.destroy();
      if (self.toastLargeMessage) self.toastLargeMessage.destroy();
      if (self.toastWithButton) self.toastWithButton.destroy();
      if (self.toastWithCustomButton) self.toastWithCustomButton.destroy();
      if (self.toastWithCallback) self.toastWithCallback.destroy();
    },
  },
};
</script>