X-Next

Appearance

Message 全局提示 ​

用于轻量级即时反馈，通常由命令式方法触发。

基础用法 ​

vue
<template>
  <x-space>
    <x-button type="primary" @click="showBasicMessage">成功提示</x-button>
    <x-button @click="showInfoMessage">信息提示</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { Message } from 'x-next';

const showBasicMessage = () => Message.success('保存成功');
const showInfoMessage = () => Message.info('这是一条信息提示');
</script>

消息类型 ​

vue
<template>
  <x-space wrap>
    <x-button @click="showTypedMessage('info')">Info</x-button>
    <x-button status="success" @click="showTypedMessage('success')">Success</x-button>
    <x-button status="warning" @click="showTypedMessage('warning')">Warning</x-button>
    <x-button status="danger" @click="showTypedMessage('error')">Error</x-button>
    <x-button status="strong" @click="showTypedMessage('strong')">Strong</x-button>
    <x-button @click="showTypedMessage('normal')">Normal</x-button>
    <x-button type="primary" @click="showTypedMessage('loading')">Loading</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { Message } from 'x-next';
import type { IMessageType } from 'x-next';

const showTypedMessage = (type: IMessageType) => {
  Message[type]({
    message: `${type} message`,
    duration: type === 'loading' ? 0 : 3000,
    showClose: type === 'loading',
  });
};
</script>

可关闭和手动关闭 ​

vue
<template>
  <x-space>
    <x-button @click="showCloseableMessage">可关闭</x-button>
    <x-button @click="showManualMessage">手动关闭</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { Message } from 'x-next';

const showCloseableMessage = () => {
  Message.info({
    message: '点击右侧按钮关闭',
    showClose: true,
    duration: 0,
  });
};

const showManualMessage = () => {
  const handler = Message.loading({
    message: '2 秒后手动关闭',
    duration: 0,
  });
  window.setTimeout(() => handler.close(), 2000);
};
</script>

更新内容 ​

vue
<template>
  <x-space>
    <x-button type="primary" @click="showUpdatedMessage">更新同一条消息</x-button>
    <x-button @click="clearMessages">清空消息</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Message } from 'x-next';

const count = ref(1);

const showUpdatedMessage = () => {
  Message.info({
    id: 'message-update-demo',
    message: `当前进度 ${count.value++}`,
    duration: 3000,
    showClose: true,
  });
};

const clearMessages = () => Message.clear();
</script>

位置和悬停 ​

vue
<template>
  <x-space>
    <x-button @click="showTopMessage">顶部</x-button>
    <x-button @click="showBottomMessage">底部</x-button>
    <x-button @click="showHoverMessage">悬停暂停</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { Message } from 'x-next';

const showTopMessage = () => Message.info({ message: '顶部提示', position: 'top' });
const showBottomMessage = () => Message.success({ message: '底部提示', position: 'bottom' });
const showHoverMessage = () => {
  Message.warning({
    message: '鼠标移入时暂停自动关闭',
    resetOnHover: true,
    duration: 4000,
  });
};
</script>

自定义内容 ​

vue
<template>
  <x-space>
    <x-button @click="showCustomIconMessage">自定义图标</x-button>
    <x-button @click="showHtmlMessage">HTML 内容</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { h } from 'vue';
import { Message } from 'x-next';

const showCustomIconMessage = () => {
  Message.info({
    message: '自定义图标提示',
    icon: () => h('span', { style: 'color: #ff7125;' }, '★'),
  });
};

const showHtmlMessage = () => {
  Message.warning({
    message: '<strong>仅用于可信 HTML</strong>',
    useHTML: true,
    showClose: true,
  });
};
</script>

useHTML 会直接渲染 HTML 字符串。只应传入可信内容，用户输入或后端返回内容需要先自行消毒。

局部容器 ​

vue
<template>
  <x-button @click="showContainerMessage">显示到局部容器</x-button>
  <div id="message-local-container" class="message-local-container"></div>
</template>

<script setup lang="ts">
import { Message } from 'x-next';

const showContainerMessage = () => {
  Message.success({
    message: '局部容器中的提示',
    renderTo: '#message-local-container',
  });
};
</script>

按需导入 ​

ts
import { Message } from 'x-next';

Methods ​

方法说明参数返回值
Message(options)显示一条提示IMessageOptions | IMessage{ close: () => void }
Message.success(message)显示成功提示IMessage | IMessageOptions{ close: () => void }
Message.error(message)显示错误提示IMessage | IMessageOptions{ close: () => void }
Message.warning(message)显示警告提示IMessage | IMessageOptions{ close: () => void }
Message.strong(message)显示强调提示IMessage | IMessageOptions{ close: () => void }
Message.info(message)显示信息提示IMessage | IMessageOptions{ close: () => void }
Message.loading(message)显示加载提示IMessage | IMessageOptions{ close: () => void }
Message.normal(message)显示普通提示，默认无图标IMessage | IMessageOptions{ close: () => void }
Message.clear(position?)清空消息'top' | 'bottom'void

IMessageOptions ​

参数说明类型默认值
id提示唯一标识，相同 id 会更新已有消息string | number-
message提示内容string | number | VNode | RenderFunction-
contentmessage 的别名string | number | VNode | RenderFunction-
type提示类型'success' | 'warning' | 'error' | 'strong' | 'info' | 'loading' | 'normal''info'
duration自动关闭时间，单位毫秒，0 表示不自动关闭number3000
center内容是否居中booleanfalse
onClose关闭回调(id?: string | number) => void-
offset与容器顶部或底部的初始偏移number20
renderTo挂载容器string | HTMLElement'body'
showClose是否显示关闭按钮booleanfalse
closableshowClose 的别名booleanfalse
showIcon是否显示图标booleantype !== 'normal'
icon自定义图标RenderFunction-
useHTML是否按 HTML 渲染字符串内容booleanfalse
popupClass自定义类名string-
position展示位置'top' | 'bottom''top'
resetOnHover鼠标悬停时暂停自动关闭booleanfalse

Types ​

ts
type IMessage = string | number | VNode | RenderFunction;
type IMessagePosition = 'top' | 'bottom';