Message

Message 提示訊息，通常會用來當 Notification，但 Message 用途不在此限，舉凡通知、錯誤提示、小提醒等都可以使用 Message 來傳遞訊息給使用者，並且還有輕重緩急程度的區別。

提示：
要在 mounted 之後觸發

<template>
  <div>
    <section>
      <h2>訊息提示</h2>
      <article>
        <section>
          <h3>基本</h3>
          <bpa-button @click="openMsg1">提示</bpa-button>
        </section>
        <section>
          <h3>前綴</h3>
          <bpa-button @click="openMsg2">純文字</bpa-button>
          <bpa-button @click="openMsg3">客製化前綴（具有危險性）</bpa-button>
        </section>
        <section>
          <h3>展示時間</h3>
          <bpa-button @click="openMsg4">顯示5秒鐘</bpa-button>
          <bpa-button @click="openMsg9">永不關閉（主動關閉）</bpa-button>
        </section>
        <section>
          <h3>主題色</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>另一種寫法</h3>
          <bpa-button @click="openMsg10">另一種寫法</bpa-button>
        </section>
        <section>
          <h3>關閉觸發</h3>
          <bpa-button @click="openMsg11">關閉訊息觸發</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: '很短',
        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('關閉了')
        }
      })
    },
  },
})
</script>

名稱	Value	Type	Default Value	Required	描述
prefix	emoji text Html(danger)	String			text 或 html(但有危險性)
theme	primary success warning danger	String	primary
dangerHTML		Boolean	false		render by html
msg		String			主要內容
duration		Number	2000		出現在螢幕上的時間
vOffset		Number	20		離螢幕上緣距離
onClose		Function			關閉後觸發

名稱	描述
Msg( msg | options )
Msg.primary( msg | options )
Msg.success( msg | options )
Msg.warning( msg | options )
Msg.danger( msg | options )