Leaf UI
  • 简体中文

      • Message 消息提示

      以短暂提示反馈操作结果。

      消息与更新

      交互预览消息与更新
      basic.tsx
      import { Button, useMessage } from '@sudden3/leaf-ui';
export function MessageBasic() {
  const { message, contextHolder } = useMessage();
  async function save() {
    const key = message.loading('正在保存');
    await new Promise((resolve) => setTimeout(resolve, 1200));
    message.open({ key, type: 'success', content: '保存成功', duration: 3, closable: true });
  }
  return (
    <>
      <div className="leaf-demo-row">
        <Button onClick={save}>异步保存</Button>
        <Button variant="outline" onClick={() => message.info('一条消息提示')}>
          提示
        </Button>
        <Button danger variant="soft" onClick={() => message.error('操作失败，请重试')}>
          错误
        </Button>
        <Button variant="soft" onClick={() => message.success('操作成功')}>
          成功
        </Button>
        <Button variant="outline" onClick={() => message.warning('请检查输入内容')}>
          警告
        </Button>
        <Button variant="ghost" onClick={() => message.close()}>
          清空消息
        </Button>
      </div>
      {contextHolder}
    </>
  );
}

      多条消息

      消息关闭时，后续消息会平滑上移。不同高度的内容会按照实际占用空间收起。

      交互预览多条消息
      stack.tsx
      import { Button, useMessage } from '@sudden3/leaf-ui';

export function MessageStack() {
  const { message, contextHolder } = useMessage();
  return (
    <>
      <Button
        variant="outline"
        onClick={() => {
          message.close();
          message.open({ key: 'stack-first', content: '第一条消息将在一秒后消失', duration: 1 });
          message.open({
            key: 'stack-second',
            content: '后续消息会平滑上移',
            duration: 5,
            closable: true,
          });
          message.open({
            key: 'stack-third',
            content: '较长的消息内容也会根据实际高度自然收起，不会跳到新的位置。',
            type: 'success',
            duration: 7,
            closable: true,
          });
        }}
      >
        连续显示三条消息
      </Button>
      {contextHolder}
    </>
  );
}

      useMessage API

      属性类型默认值说明
      messageMessageApi—调用消息方法
      contextHolderReactNode—放在目标主题、语言区域中

      MessageApi

      属性类型默认值说明
      open(options: MessageOptions) => string—创建或按 key 更新，返回 key
      success / info / warning / error(content: ReactNode, duration?: number) => string—快捷显示对应类型
      loading(content: ReactNode) => string—持续加载消息，返回 key
      close(key?: string) => void—关闭指定消息，无 key 时关闭全部

      MessageOptions

      属性类型默认值说明
      keystring自动生成相同 key 更新现有消息
      contentReactNode必填消息内容
      type'success' | 'info' | 'warning' | 'error' | 'loading''info'消息类型
      durationnumber3自动关闭秒数；0 不自动关闭；loading 默认 0
      closablebooleanfalse展示关闭按钮
      onClose() => void—开始关闭时触发一次

      Message API

      属性类型默认值说明
      openboolean必填受控显示状态
      contentReactNode必填消息内容
      type'success' | 'info' | 'warning' | 'error' | 'loading''info'消息类型
      durationnumber3秒数；0 持续显示；loading 默认 0
      closablebooleanfalse关闭按钮
      onClose / afterClose() => void—请求关闭 / 动画完成

      类型

      定义组件属性或组装变量时可导入相关类型。

      import type { MessageProps, MessageOptions, MessageApi } from '@sudden3/leaf-ui';

      使用说明

      推荐通过 useMessage 使用，同一 key 可以把加载消息更新为结果。鼠标停留或焦点位于消息中时暂停计时，离开后按剩余时间继续。

      也支持直接渲染 Message；收到 onClose 后由应用设置 open=false。将 contextHolder 放到 ConfigProvider 中，消息跟随区域主题与语言。