---
title: Message 消息提示
lang: zh-CN
---

# Message 消息提示

常用于主动操作后的反馈提示。 与 Notification 的区别是后者更多用于系统级通知的被动提醒。

## 基础用法

:::demo

message/basic

:::

## 不同状态

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

:::demo 当需要自定义更多属性时，Message 也可以接收一个对象为参数。 比如，设置 `type` 字段可以定义不同的状态，默认为 `info`。 此时正文内容以 `message` 的值传入。 同时，我们也为 `Message` 的各种 `type` 注册了方法，可以在不传入 `type` 字段的情况下像 `open4` 那样直接调用。

message/different-types

:::

## 可关闭的消息提示

可以添加关闭按钮。

:::demo 默认的 `Message` 是不可以被人工关闭的。 如果你需要手动关闭功能，你可以把 `showClose` 设置为 true 此外，和 Notification 一样，Message 拥有可控的 `duration`, 默认的关闭时间为 3000 毫秒，当把这个属性的值设置为 0 便表示该消息不会被自动关闭。

message/closable

:::

## 文字居中

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

:::demo

message/centered-content

:::

## 使用 HTML 片段作为正文内容

`message` 还支持使用 HTML 字符串作为正文内容。

:::demo 将 `dangerouslyUseHTMLString` 属性设置为 true,message 就会被当作 HTML 片段处理。

message/raw-html

:::

:::warning

`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting) 攻击。 因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，永远不要将用户提交的内容赋值给 `message` 属性。

:::

## 分组消息合并

合并相同内容的消息。

:::demo 设置 `grouping` 为 true，内容相同的 `message` 将被合并。

message/grouping

:::

## 全局方法

kankan components 为 app.config.globalProperties 添加了全局方法 $message。 因此在 vue 实例中你可以使用当前页面中的调用方式调用 Message

## Local import

```ts
import { KkMessage } from 'kankan-components'
```

此时调用方法为 `KkMessage(options)`。 我们也为每个 type 定义了各自的方法，如 `KkMessage.success(options)`。 并且可以调用 `KkMessage.closeAll()` 手动关闭所有实例。

## App context inheritance <el-tag> >= 2.0.3</el-tag>

现在 Message 接受一条 `context` 作为消息构造器的第二个参数，允许你将当前应用的上下文注入到 `Message` 中，这将允许你继承应用程序的所有属性。

你可以像这样使用它：

:::tip

如果您全局注册了 KkMessage 组件，它将自动继承应用的上下文环境。

:::

```ts
import { getCurrentInstance } from 'vue'
import { KkMessage } from 'kankan-components'

// in your setup method
const { appContext } = getCurrentInstance()!
KkMessage({}, appContext)
```

## API

### Options

| Name                     | Description                                                                                          | Type                                                 | Default |
| ------------------------ | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------- |
| message                  | message text                                                                                         | ^[string] / ^[VNode] / ^[Function]`() => VNode`      | ''      |
| type                     | message type                                                                                         | ^[enum]`'success' \| 'warning' \| 'info' \| 'error'` | info    |
| icon                     | custom icon component, overrides `type`                                                              | ^[string] / ^[Component]                             | —       |
| dangerouslyUseHTMLString | whether `message` is treated as HTML string                                                          | ^[boolean]                                           | false   |
| customClass              | custom class name for Message                                                                        | ^[string]                                            | ''      |
| duration                 | display duration, millisecond. If set to 0, it will not turn off automatically                       | ^[number]                                            | 3000    |
| showClose                | whether to show a close button                                                                       | ^[boolean]                                           | false   |
| center                   | whether to center the text                                                                           | ^[boolean]                                           | false   |
| onClose                  | callback function when closed with the message instance as the parameter                             | ^[Function]`() => void`                              | —       |
| offset                   | set the distance to the top of viewport                                                              | ^[number]                                            | 16      |
| appendTo                 | set the root element for the message, default to `document.body`                                     | ^[string] / ^[HTMLElement]                           | —       |
| grouping                 | merge messages with the same content, type of VNode message is not supported                         | ^[boolean]                                           | false   |
| repeatNum                | The number of repetitions, similar to badge, is used as the initial number when used with `grouping` | ^[number]                                            | 1       |

### Methods

`Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.

| Name  | Description       | Type                    |
| ----- | ----------------- | ----------------------- |
| close | close the Message | ^[Function]`() => void` |