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 攻击。因此在 dangerouslyUseHTMLString 打开的情况下，请确保 message 的内容是可信的，永远不要将用户提交的内容赋值给 message 属性。

:::

分组消息合并

合并相同内容的消息。

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

message/grouping

:::

全局方法

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

Local import

import { KkMessage } from 'kankan-components'

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

App context inheritance >= 2.0.3

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

你可以像这样使用它：

:::tip

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

:::

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`

message.md 6.2 KB Permalink History Raw