Message 消息提示

常用于主动操作后的反馈提示。

名称	分类	说明	类型	默认值
`type`	风格	消息类型	`'success' \| 'warning' \| 'info' \| 'danger' \| 'error'`	`'info'`
`center`	风格	文字是否居中	`boolean`	`false`
`offset`	风格	距离窗口顶部的偏移量	`number`	`20`
`plain`	风格	是否使用朴素样式（浅色背景，彩色文字）	`boolean`	`false`
`ghost`	风格	是否使用幽灵样式（透明背景，仅显示边框）	`boolean`	`false`
`duration`	行为	显示时间（毫秒），设为 0 则不会自动关闭	`number`	`3000`
`showClose`	行为	是否显示关闭按钮	`boolean`	`false`
`showTimer`	行为	是否显示持续时间进度条	`boolean`	`true`
`max`	行为	最多可同时显示的消息数量，超出时关闭最早的消息	`number`	`—`
`message`	内容	消息文字	`string \| VNode`	—
`icon`	内容	自定义图标名称，覆盖默认类型图标	`string`	`—`
`PxMessage`	方法	显示消息	`(options: MessageOptions \| string) => MessageHandler`	—
`PxMessage.success`	方法	显示成功消息	`(options: MessageOptions \| string) => MessageHandler`	—
`PxMessage.warning`	方法	显示警告消息	`(options: MessageOptions \| string) => MessageHandler`	—
`PxMessage.info`	方法	显示信息消息	`(options: MessageOptions \| string) => MessageHandler`	—
`PxMessage.danger`	方法	显示危险消息	`(options: MessageOptions \| string) => MessageHandler`	—
`PxMessage.error`	方法	显示错误消息	`(options: MessageOptions \| string) => MessageHandler`	—
`PxMessage.closeAll`	方法	关闭所有消息	`(type?: MessageType) => void`	—
`close`	方法	关闭当前消息	`() => void`	—

基础用法

从顶部出现，3 秒后自动消失。

<template>
  <px-button @click="showMessage">Show Message</px-button>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showMessage = () => {
  PxMessage('This is a message');
};
</script>

不同状态

用来显示「成功、警告、消息、错误」类的操作反馈。

<template>
  <div class="demo-message">
    <px-button @click="showSuccess">Success</px-button>
    <px-button @click="showWarning">Warning</px-button>
    <px-button @click="showInfo">Info</px-button>
    <px-button @click="showDanger">Danger</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showSuccess = () => {
  PxMessage.success('Success!');
};
const showWarning = () => {
  PxMessage.warning('Warning!');
};
const showInfo = () => {
  PxMessage.info('Info message');
};
const showDanger = () => {
  PxMessage.danger('Danger!');
};
</script>

<style scoped>
.demo-message {
  display: flex;
  gap: 12px;
}
</style>

朴素样式

使用 plain 显示浅色背景、彩色文字的朴素风格。

<template>
  <div class="demo-message">
    <px-button @click="showInfo">Info</px-button>
    <px-button @click="showSuccess">Success</px-button>
    <px-button @click="showWarning">Warning</px-button>
    <px-button @click="showDanger">Danger</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showInfo = () => {
  PxMessage({ message: 'Plain info message', plain: true, type: 'info' });
};
const showSuccess = () => {
  PxMessage({ message: 'Plain success message', plain: true, type: 'success' });
};
const showWarning = () => {
  PxMessage({ message: 'Plain warning message', plain: true, type: 'warning' });
};
const showDanger = () => {
  PxMessage({ message: 'Plain danger message', plain: true, type: 'danger' });
};
</script>

<style scoped>
.demo-message {
  display: flex;
  gap: 12px;
}
</style>

幽灵样式

使用 ghost 显示透明背景、仅有边框的幽灵风格。

<template>
  <div class="demo-message">
    <px-button @click="showInfo">Info</px-button>
    <px-button @click="showSuccess">Success</px-button>
    <px-button @click="showWarning">Warning</px-button>
    <px-button @click="showDanger">Danger</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showInfo = () => {
  PxMessage({ message: 'Ghost info message', ghost: true, type: 'info' });
};
const showSuccess = () => {
  PxMessage({ message: 'Ghost success message', ghost: true, type: 'success' });
};
const showWarning = () => {
  PxMessage({ message: 'Ghost warning message', ghost: true, type: 'warning' });
};
const showDanger = () => {
  PxMessage({ message: 'Ghost danger message', ghost: true, type: 'danger' });
};
</script>

<style scoped>
.demo-message {
  display: flex;
  gap: 12px;
}
</style>

自定义图标

通过 icon 属性覆盖默认的类型图标。

<template>
  <div class="demo-message">
    <px-button @click="showStar">Star Icon</px-button>
    <px-button @click="showHeart">Heart Icon</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showStar = () => {
  PxMessage({ message: 'Starred message!', icon: 'star', type: 'warning' });
};
const showHeart = () => {
  PxMessage({ message: 'Liked message!', icon: 'heart', type: 'danger' });
};
</script>

<style scoped>
.demo-message {
  display: flex;
  gap: 12px;
}
</style>

可关闭的消息

可以添加关闭按钮。

<template>
  <px-button @click="showMessage">Show Closable Message</px-button>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showMessage = () => {
  PxMessage({
    message: 'This is a closable message',
    showClose: true,
    duration: 0,
  });
};
</script>

持续时间进度条

消息底部会显示一个细进度条，展示剩余停留时间。通过 showTimer（默认为 true）控制。

<template>
  <div class="demo-message">
    <px-button @click="showWithTimer">With Timer Bar</px-button>
    <px-button @click="showWithoutTimer">Without Timer Bar</px-button>
    <px-button @click="showLongDuration">Long Duration (8s)</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showWithTimer = () => {
  PxMessage({ message: 'Watch the timer bar below', duration: 5000 });
};
const showWithoutTimer = () => {
  PxMessage({ message: 'No timer bar here', duration: 5000, showTimer: false });
};
const showLongDuration = () => {
  PxMessage({ message: 'This stays for 8 seconds', duration: 8000, type: 'success' });
};
</script>

<style scoped>
.demo-message {
  display: flex;
  gap: 12px;
}
</style>

文字居中

使用 center 属性让文字水平居中。

<template>
  <px-button @click="showMessage">Show Centered Message</px-button>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showMessage = () => {
  PxMessage({
    message: 'Centered text message',
    center: true,
  });
};
</script>

最大显示数量

设置 max 限制同时显示的消息数量，超出时自动关闭最早的消息。

<template>
  <div class="demo-message">
    <px-button @click="showMessages">Show Messages (max 3)</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

let count = 0;
const showMessages = () => {
  count++;
  PxMessage({
    message: `Message #${count}`,
    duration: 5000,
    max: 3,
  });
};
</script>

<style scoped>
.demo-message {
  display: flex;
  gap: 12px;
}
</style>

关闭所有消息

调用 PxMessage.closeAll() 关闭所有消息。

<template>
  <div class="demo-message">
    <px-button @click="showMessages">Show Multiple Messages</px-button>
    <px-button @click="closeAll">Close All</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showMessages = () => {
  PxMessage.success('Message 1');
  PxMessage.warning('Message 2');
  PxMessage.info('Message 3');
};

const closeAll = () => {
  PxMessage.closeAll();
};
</script>

<style scoped>
.demo-message {
  display: flex;
  gap: 12px;
}
</style>

Message 消息提示 ​

基础用法 ​

不同状态 ​

朴素样式 ​

幽灵样式 ​

自定义图标 ​

可关闭的消息 ​

持续时间进度条 ​

文字居中 ​

最大显示数量 ​

关闭所有消息 ​