FxMsg 消息提示

命令式 API，从顶部出现、自动消失、多条堆叠。不依赖任何 UI 框架。全局方法 app.config.globalProperties.$fxMsg。

基础用法

从顶部出现，3 秒后消失。可用 placement 控制位置。

<template>
  <div class="flex flex-wrap gap-1">
    <FxBtn :plain="true" @click="open">Show message</FxBtn>
    <FxBtn :plain="true" @click="openVn">VNode</FxBtn>
  </div>
</template>
<script setup>
import { h } from 'vue'
import { fxMsg } from '@fx/components'
const open = () => fxMsg('This is a message.')
const openVn = () => {
  fxMsg({
    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode'),
    ]),
  })
}
</script>

不同类型

用于展示 Success / Warning / Info / Error 等反馈。常用方法的 type 默认 info；primary 在 ^(2.9.11) 加入。

<template>
  <div class="flex flex-wrap gap-1">
    <FxBtn :plain="true" @click="openInfo">Info</FxBtn>
    <FxBtn :plain="true" @click="openSuccess">Success</FxBtn>
    <FxBtn :plain="true" @click="openWarning">Warning</FxBtn>
    <FxBtn :plain="true" @click="openError">Error</FxBtn>
    <FxBtn :plain="true" @click="openPrimary">Primary</FxBtn>
  </div>
</template>
<script setup>
import { fxMsg } from '@fx/components'
const openInfo = () => fxMsg('This is a info message.')
const openSuccess = () => fxMsg({ message: 'Congrats, this is a success message.', type: 'success' })
const openWarning = () => fxMsg({ message: 'Warning, this is a warning message.', type: 'warning' })
const openError = () => fxMsg.error('Oops, this is a error message.')
const openPrimary = () => fxMsg.primary('This is a primary message.')
</script>

朴素模式

plain 设为 true 时背景为白色。

<template>
  <div class="flex flex-wrap gap-1">
    <FxBtn :plain="true" @click="openPrimary">Primary</FxBtn>
    <FxBtn :plain="true" @click="openSuccess">Success</FxBtn>
    <FxBtn :plain="true" @click="openWarning">Warning</FxBtn>
    <FxBtn :plain="true" @click="openInfo">Info</FxBtn>
    <FxBtn :plain="true" @click="openError">Error</FxBtn>
  </div>
</template>
<script setup>
import { fxMsg } from '@fx/components'
const openPrimary = () => fxMsg.primary({ message: 'This is a primary message.', plain: true })
const openSuccess = () => fxMsg({ message: 'Congrats, this is a success message.', type: 'success', plain: true })
const openWarning = () => fxMsg({ message: 'Warning, this is a warning message.', type: 'warning', plain: true })
const openInfo = () => fxMsg({ message: 'This is a info message.', type: 'info', plain: true })
const openError = () => fxMsg({ message: 'Oops, this is a error message.', type: 'error', plain: true })
</script>

可关闭

可以添加关闭按钮。默认不可手动关闭，设置 showClose 后可关。duration 默认 3000ms，设为 0 不自动消失。

<template>
  <div class="flex flex-wrap gap-1">
    <FxBtn :plain="true" @click="open1">Info</FxBtn>
    <FxBtn :plain="true" @click="open2">Success</FxBtn>
    <FxBtn :plain="true" @click="open3">Warning</FxBtn>
    <FxBtn :plain="true" @click="open4">Error</FxBtn>
    <FxBtn :plain="true" @click="open5">Won't close</FxBtn>
  </div>
</template>
<script setup>
import { fxMsg } from '@fx/components'
const open1 = () => fxMsg({ showClose: true, message: 'This is a info message.' })
const open2 = () => fxMsg({ showClose: true, message: 'Congrats, this is a success message.', type: 'success' })
const open3 = () => fxMsg({ showClose: true, message: 'Warning, this is a warning message.', type: 'warning' })
const open4 = () => fxMsg({ showClose: true, message: 'Oops, this is a error message.', type: 'error' })
const open5 = () => fxMsg({ showClose: true, message: `Won't close automatically.`, duration: 0 })
</script>

使用 HTML 字符串

message 支持 HTML 字符串。

<template>
  <FxBtn :plain="true" @click="openHTML">Use HTML string</FxBtn>
</template>
<script setup>
import { fxMsg } from '@fx/components'
const openHTML = () => {
  fxMsg({
    dangerouslyUseHTMLString: true,
    message: '<strong>This is <i>HTML</i> string</strong>',
  })
}
</script>

合并消息

合并相同内容的消息。

<template>
  <div class="flex flex-wrap gap-1">
    <FxBtn :plain="true" @click="() => fxMsg({ message: 'Same message', type:'primary', grouping: true, duration: 3000 })">Show twice(primary)</FxBtn>
    <FxBtn :plain="true" @click="() => fxMsg({ message: 'Same message', type:'error', grouping: true, duration: 3000 })">Show twice(error)</FxBtn>
    <FxBtn :plain="true" @click="() => fxMsg({ message: 'Same message', type:'success', grouping: true, duration: 3000 })">Show twice(success)</FxBtn>
    <FxBtn :plain="true" @click="() => fxMsg({ message: 'Same message', type:'info', grouping: true, duration: 3000 })">Show twice(info)</FxBtn>
  </div>
</template>
<script setup>
import { fxMsg } from '@fx/components'
</script>

方位

控制消息出现的位置。默认顶部，可选 top / top-left / top-right / bottom / bottom-left / bottom-right。

<template>
  <div class="flex flex-wrap gap-1">
    <FxBtn :plain="true" @click="() => fxMsg({ message: 'Top Left', placement: 'top-left' })">top-left</FxBtn>
    <FxBtn :plain="true" @click="() => fxMsg({ message: 'Top', placement: 'top' })">top</FxBtn>
    <FxBtn :plain="true" @click="() => fxMsg({ message: 'Top Right', placement: 'top-right' })">top-right</FxBtn>
    <FxBtn :plain="true" @click="() => fxMsg({ message: 'Bottom Left', placement: 'bottom-left' })">bottom-left</FxBtn>
    <FxBtn :plain="true" @click="() => fxMsg({ message: 'Bottom', placement: 'bottom' })">bottom</FxBtn>
    <FxBtn :plain="true" @click="() => fxMsg({ message: 'Bottom Right', placement: 'bottom-right' })">bottom-right</FxBtn>
  </div>
</template>
<script setup>
import { fxMsg } from '@fx/components'
</script>

局部引入

import { fxMsg } from '@fx/components'

可直接调用 fxMsg(options)，同时注册了不同类型的方法如 fxMsg.success(options)。调用 fxMsg.closeAll() 可手动关闭所有消息。调用 fxMsg.closeAll(type?) 可按类型关闭。

API

Options

Name	Description	Type	Default
message	消息文字	string / VNode / () => VNode	''
type	消息类型	'primary' | 'success' | 'warning' | 'info' | 'error'	info
plain	是否朴素	boolean	false
icon	自定义图标组件，覆盖 type	Component	—
dangerouslyUseHTMLString	message 是否作为 HTML	boolean	false
customClass	自定义 class	string	''
duration	显示时长 ms（0 不自动关）	number	3000
showClose	是否显示关闭按钮	boolean	false
onClose	关闭回调	() => void	—
offset	距视口边缘偏移	number	16
placement	消息出现方位	'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right'	top
appendTo	挂载容器	string / HTMLElement	body
max	同方位同时显示的最大数量，超出则不再创建	number	—
grouping	相同内容的消息合并	boolean	false
repeatNum	重复次数（配合 grouping）	number	1

Methods

fxMsg() 返回 { close }，可手动关闭。

Name	Description	Type
close	关闭消息	() => void