Message

Introduction to using the Message notification component

Message prompt information, usually used as a Notification, but Message is not limited to that purpose; notifications, error prompts, small reminders, etc. can all use Message to deliver information to users, and it also has distinctions in urgency levels.

Note: Must be triggered after mounted

Example

<template>
  <div>
    <section>
      <h2>Message Prompt</h2>
      <article>
        <section>
          <h3>Basic</h3>
          <bpa-button @click="openMsg1">Prompt</bpa-button>
        </section>
        <section>
          <h3>Prefix</h3>
          <bpa-button @click="openMsg2">Plain Text</bpa-button>
          <bpa-button @click="openMsg3">Custom Prefix (dangerous)</bpa-button>
        </section>
        <section>
          <h3>Display Time</h3>
          <bpa-button @click="openMsg4">Show for 5 seconds</bpa-button>
          <bpa-button @click="openMsg9">Never close (manual close)</bpa-button>
        </section>
        <section>
          <h3>Theme Color</h3>
          <bpa-button @click="openMsg5">Normal</bpa-button>
          <bpa-button @click="openMsg6">Success</bpa-button>
          <bpa-button @click="openMsg7">Warning</bpa-button>
          <bpa-button @click="openMsg8">Danger</bpa-button>
        </section>
        <section>
          <h3>Another Syntax</h3>
          <bpa-button @click="openMsg10">Another Syntax</bpa-button>
        </section>
        <section>
          <h3>Close Trigger</h3>
          <bpa-button @click="openMsg11">Close Message Trigger</bpa-button>
        </section>
      </article>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Bpa from "@/components";
const { Msg } = Bpa
export default Vue.extend({
  methods: {
    openMsg1() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg2() {
      (this as any).$msg({
        prefix: '⚠',
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg3() {
      (this as any).$msg({
        prefix: '<img src="favicon.ico" alt=""/>',
        dangerHTML: true,
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg4() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
        duration: 5000
      })
    },
    openMsg5() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg6() {
      (this as any).$msg.success({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg7() {
      (this as any).$msg.warning({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg8() {
      (this as any).$msg.danger({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg9() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
        duration: 0
      })
    },
    openMsg10() {
      Msg({
        prefix: '<img src="favicon.ico" alt=""/>',
        dangerHTML: true,
        msg: 'Very short',
        duration: 0,
        theme: 'primary',
      })
    },
    openMsg11() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
        duration: 0,
        onClose: function(){
          alert('Closed')
        }
      })
    },
  },
})
</script>

Attributes

Name	Value	Type	Default	Required	Note
prefix	emoji, text, Html(danger)	String			text or html (but dangerous)
theme	primary, success, warning, danger	String	primary
dangerHTML		Boolean	false		Use html tag
msg		String
duration		Number	200		Time displayed on screen
vOffset		Number	20
onClose		Function	null		Triggered after closing

Methods

Name
Msg( msg | options )
Msg.primary( msg | options )
Msg.success( msg | options )
Msg.warning( msg | options )
Msg.danger( msg | options )

Demo