@group_wtf_npm/message

@group_wtf_npm/message简易的message提示组件

安装

pnpm add @group_wtf_npm/message

使用

import initGlobalMessage from '@group_wtf_npm/message';
globalThis.message = initGlobalMessage();

message.info('加载中');

Docmention

initGlobalMessage 配置项

• tag: 自定义注册的元素名称，默认为 wtf-message。
• opts: 其它配置项
  • root: 全局消息挂载的根元素，可以是 DOM 元素或选择器字符串，默认为 document.body。
  • delay: 默认提示时长 (秒)

GlobalMessage 实例方法

• show(userOpts: { msg: string, id?: string, tag?: string, type?: string, delay?: number }, callback?: Function): string
  显示消息。

  • userOpts: 用户配置项
    • msg: 消息内容。
    • id: 可选的消息唯一 ID。
    • tag: 自定义消息元素的标签名称，默认为 wtf-message。
    • type: 消息类型（如 success、error、warn、info）。
    • delay: 消息自动隐藏的延迟时间（单位：秒），默认为 2。
  • callback: 消息隐藏后的回调函数。
  • 返回值: 返回消息的唯一 ID。

• hide(id: string): void
  隐藏指定的消息。

  • id: 消息的唯一 ID。

• notify(type: string, msg: string, useOpts?: object): Promise
  通知消息。

  • type: 消息类型（如 success、error、warn、info）。
  • msg: 消息内容。
  • useOpts: 额外的配置项。
  • 返回值: 返回一个 Promise，在消息隐藏后 resolve。

• success(msg: string, useOpts?: object): Promise
  显示成功消息。

  • msg: 消息内容。
  • useOpts: 额外的配置项。

• error(msg: string, useOpts?: object): Promise
  显示错误消息。

  • msg: 消息内容。
  • useOpts: 额外的配置项。

• warn(msg: string, useOpts?: object): Promise
  显示警告消息。

  • msg: 消息内容。
  • useOpts: 额外的配置项。

• info(msg: string, useOpts?: object): Promise
  显示信息消息。

  • msg: 消息内容。
  • useOpts: 额外的配置项。

• getId(num?: number): string
  生成唯一 ID。

  • num: ID 的长度，默认为 6。
  • 返回值: 返回生成的唯一 ID。

示例

import initGlobalMessage from '@group_wtf_npm/message';

// 初始化全局消息管理器
globalThis.message = initGlobalMessage();

// 显示信息消息
message.info('加载中');

// 显示成功消息
message.success('操作成功');

// 显示错误消息
message.error('操作失败');

// 显示警告消息
message.warn('警告信息');

// 自定义消息
message.show({ msg: '自定义消息', type: 'info', delay: 3 }, () => {
    console.log('消息已隐藏');
});

许可证

MIT License