cui

Appearance

cuixingjian
1019
5m

Message 消息提示 ​

全局轻量提示信息。支持四种类型、六种位置、可选图标、自动关闭与手动关闭。当前版本统一通过服务函数 CMessage 调用，已移除全局消息别名。

引入与调用 ​

  • 按需引入（推荐）：
ts
import { CMessage } from "@cuixingjian/cui";

// 通用调用
CMessage({ type: "info", message: "信息提示" });

// 快捷方法（支持 info/success/warning/error）
CMessage.success("保存成功");
CMessage.info("提示信息");

按钮点击示例 ​

返回值可用于手动关闭：

控制自动关闭时长：

显示关闭按钮：

自定义内容：

组件使用示例（组合式 API <script setup>） ​

vue
<script setup lang="ts">
import { h } from "vue";
import { CMessage } from "@cuixingjian/cui";

const save = async () => {
  // 模拟保存成功
  await Promise.resolve();
  CMessage.success({ message: "保存成功", duration: 1500 });
};

const warnInput = () => {
  CMessage.warning({ message: "请检查输入", closable: true, duration: 0 });
};

const showAtRightTop = () => {
  CMessage.info({ message: "右上角提示", position: "top-right" });
};

const customRender = () => {
  CMessage({
    type: "info",
    render: () =>
      h("span", null, [
        "自定义渲染 ",
        h("strong", null, "VNode 内容"),
        "（可包含图标和任意结构）",
      ]),
  });
};
</script>

<template>
  <div class="demo-grid">
    <c-button type="success" @click="save">保存</c-button>
    <c-button type="warning" @click="warnInput">输入警告</c-button>
    <c-button @click="showAtRightTop">右上角提示</c-button>
    <c-button plain @click="customRender">自定义渲染</c-button>
  </div>

  <!-- 手动关闭演示 -->
  <c-button
    @click="
      () => {
        const inst = CMessage({
          type: 'info',
          message: '手动关闭演示',
          duration: 0,
          closable: true,
        });
        setTimeout(() => inst.close(), 3000);
      }
    "
  >
    3 秒后手动关闭
  </c-button>

  <!-- 多条队列演示 -->
  <c-button
    @click="
      () => {
        for (let i = 0; i < 4; i++) CMessage.info({ message: `队列 ${i + 1}` });
      }
    "
    >队列演示</c-button
  >

  <!-- 位置演示 -->
  <div style="margin-top: 8px; display:flex; gap:8px; flex-wrap:wrap;">
    <c-button @click="() => CMessage.info({ message: '顶部', position: 'top' })"
      >top</c-button
    >
    <c-button
      @click="() => CMessage.info({ message: '底部', position: 'bottom' })"
      >bottom</c-button
    >
    <c-button
      @click="() => CMessage.info({ message: '左上', position: 'top-left' })"
      >top-left</c-button
    >
    <c-button
      @click="() => CMessage.info({ message: '右上', position: 'top-right' })"
      >top-right</c-button
    >
    <c-button
      @click="() => CMessage.info({ message: '左下', position: 'bottom-left' })"
      >bottom-left</c-button
    >
    <c-button
      @click="
        () => CMessage.info({ message: '右下', position: 'bottom-right' })
      "
      >bottom-right</c-button
    >
  </div>
</template>

选项（Options） ​

CMessage(options) 支持以下选项：

  • type：消息类型，'info' | 'success' | 'warning' | 'error'，默认 'info'
  • message：文本消息内容（与 render 二选一）
  • duration：自动关闭时间（毫秒），默认 3000；设为 0 表示不自动关闭
  • showIcon：是否显示类型图标，默认 true
  • closable：是否显示关闭按钮，默认 false
  • position：展示位置，'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'，默认 'top'
  • render：自定义渲染函数（Vue VNode），用于替代纯文本
  • onClose：关闭时回调（包括手动与自动关闭）

返回值：{ close: () => void }，可在需要时主动关闭该条消息。

示例：

vue
<script setup lang="ts">
import { CMessage } from "@cuixingjian/cui";

function show(
  pos:
    | "top"
    | "bottom"
    | "top-left"
    | "top-right"
    | "bottom-left"
    | "bottom-right"
) {
  CMessage.info({ message: `位置：${pos}`, position: pos });
}
</script>

<template>
  <div class="demo-grid">
    <c-button @click="() => show('top')">顶部</c-button>
    <c-button @click="() => show('top-left')">左上</c-button>
    <c-button @click="() => show('top-right')">右上</c-button>
    <c-button @click="() => show('bottom')">底部</c-button>
    <c-button @click="() => show('bottom-left')">左下</c-button>
    <c-button @click="() => show('bottom-right')">右下</c-button>
  </div>
</template>

自定义内容（render） ​

通过 render 传入自定义 VNode 内容：

vue
<script setup lang="ts">
import { h } from "vue";
import { CMessage } from "@cuixingjian/cui";

const showCustom = () => {
  CMessage({
    type: "warning",
    render: () =>
      h("span", null, ["自定义内容：", h("strong", null, "加粗"), " 与图标"]),
  });
};
</script>

<template>
  <c-button type="warning" @click="showCustom">自定义内容</c-button>
</template>