@grubbylee/tiny-message-plus

一个独立目录开发的 Vue3 Message 扩展包，使用方式接近 TinyVue 的全局消息能力。

安装

npm i @grubbylee/tiny-message-plus

在项目中使用

import { createApp } from 'vue'
import App from './App.vue'
import { TinyMessagePlugin } from '@grubbylee/tiny-message-plus'

const app = createApp(App)
app.use(TinyMessagePlugin, {
  duration: 3000,
  offset: 16,
  max: 5,
  zIndex: 5000,
  safeTop: 'auto'
})
app.mount('#app')

调用方式

1) 组合式/普通模块调用

import { message } from '@grubbylee/tiny-message-plus'

message.success('保存成功')
message.error({ message: '保存失败', showClose: true })
const loading = message.loading({ message: '提交中...', showClose: true })

setTimeout(() => {
  loading.close()
}, 1600)

2) 组件内通过 this 调用

this.$message.info('提示内容')
this.$tinyMessage.warning('请先完善信息')

API

• message(options | text)
• message.info(options | text)
• message.success(options | text)
• message.warning(options | text)
• message.error(options | text)
• message.loading(options | text)（默认不自动关闭）
• message.close(id)
• message.closeAll()
• message.config({ duration, offset, max, zIndex, safeTop, appendTo })

options 字段：

• message: string 消息文本
• status?: 'info' | 'success' | 'warning' | 'error' | 'loading'
• duration?: number 自动关闭时长(ms)
• showClose?: boolean 是否显示关闭按钮
• zIndex?: number
• onClose?: () => void

config/plugin 额外字段：

• safeTop?: number | 'auto' | string | (() => number)
  说明：消息顶部安全区域。默认 'auto'，会自动避让页面顶部固定/吸顶 Header。
  示例：0（不避让）、'--app-header-height'（读取 CSS 变量）、() => 76（动态函数）。
• appendTo?: string | HTMLElement
  说明：消息挂载容器，默认 'body'。

本地开发

cd extensions/tiny-message-plus
npm install
npm run build

联调 Demo

cd extensions/tiny-message-plus
npm run demo

默认打开地址：http://localhost:5179

发布 npm

cd extensions/tiny-message-plus
npm run build
npm publish --access public