Message 消息提示

常用于主动操作后的反馈提示。

基础用法

从顶部出现，3 秒后自动消失。

<script setup>
import { h } from 'vue'
import { createMessage } from '@/components/lib/Message/src/method'
import PfButton from '@/components/lib/Button/src/Button.vue'
const open = () => {
  createMessage({ message: 'This is a message.' })
}

const openVn = () => {
  createMessage({
    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode')
    ])
  })
}
</script>
<template>
  <div class="mb-4">
    <pf-button :plain="true" @click="open">Show message</pf-button>
    <pf-button :plain="true" @click="openVn">VNode</pf-button>
  </div>
</template>

不同状态

从顶部出现，3 秒后自动消失。

<script setup>
import { createMessage } from '@/components/lib/Message/src/method'
import PfButton from '@/components/lib/Button/src/Button.vue'
const open1 = () => {
  createMessage({ message: 'This is a message.' })
}
const open2 = () => {
  createMessage({
    message: 'Congrats, this is a success message.',
    type: 'success'
  })
}
const open3 = () => {
  createMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning'
  })
}
const open4 = () => {
  createMessage({
    message: 'Oops, this is a error message.',
    type: 'danger'
  })
}
</script>
<template>
  <div class="mb-4">
    <pf-button :plain="true" @click="open2">Success</pf-button>
    <pf-button :plain="true" @click="open3">Warning</pf-button>
    <pf-button :plain="true" @click="open1">Message</pf-button>
    <pf-button :plain="true" @click="open4">Error</pf-button>
  </div>
</template>

可关闭的消息提示

可以添加关闭按钮。

<script setup>
import { createMessage } from '@/components/lib/Message/src/method'
import PfButton from '@/components/lib/Button/src/Button.vue'
const open1 = () => {
  createMessage({ message: 'This is a message.', showClose: true, duration: 0 })
}
const open2 = () => {
  createMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
    showClose: true,
    duration: 0
  })
}
const open3 = () => {
  createMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning',
    showClose: true,
    duration: 0
  })
}
const open4 = () => {
  createMessage({
    message: 'Oops, this is a error message.',
    type: 'danger',
    showClose: true,
    duration: 0
  })
}
</script>
<template>
  <div class="mb-4">
    <pf-button :plain="true" @click="open2">Success</pf-button>
    <pf-button :plain="true" @click="open3">Warning</pf-button>
    <pf-button :plain="true" @click="open1">Message</pf-button>
    <pf-button :plain="true" @click="open4">Error</pf-button>
  </div>
</template>

手动关闭所有实例

可以调用 message 模块提供了一个 closeAll() 手动关闭所有实例。

<script setup>
import { createMessage, closeAll } from '@/components/lib/Message/src/method'
import PfButton from '@/components/lib/Button/src/Button.vue'
const open = () => {
  createMessage({ message: 'This is a message.' })
}

const close = () => {
  closeAll()
}
</script>
<template>
  <div class="mb-4">
    <pf-button :plain="true" @click="open">Show message</pf-button>
    <pf-button :plain="true" @click="close">Close all</pf-button>
  </div>
</template>

Message 属性

使用 createMessage 创建信息，它接受一个Object，以下是 Object 中的属性列表。

Name	Description	Type	Default
message	消息文字	'string' | 'vNode'
type	消息类型	'success' | 'warning' |'info' | 'danger'	info
showClose	是否显示关闭按钮	boolean	false
duration	显示时间，单位为毫秒。 设为 0 则不会自动关闭	number	3000

Message 方法

Name	Description	Type
close	关闭当前的 Message	() => void

Message 全局方法

Name	Description	Type
closeAll	关闭当前所有的 Message	() => void