Message 全局提示 #

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

基础用法 #

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

Message 在配置上与 Notification 非常类似,所以部分 options 在此不做详尽解释,文末有 options 列表,可以结合 Notification 的文档理解它们。KDesign 注册了一个$message方法用于调用

打开消息提示 打开操作按钮 打开文字链接

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdib3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHN0eWxlPi5rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeXtmaWxsOnZhcigtLWtkLWNvbG9yLWljb24tYmx1ZS1wcmltYXJ5LCMyNjYxQkYpO3N0cm9rZTp2YXIoLS1rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSwjMjY2MUJGKX08L3N0eWxlPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTkuNSA0LjVWMkM5LjUgMS43MjM4NiA5LjI3NjE0IDEuNSA5IDEuNUgyQzEuNzIzODYgMS41IDEuNSAxLjcyMzg2IDEuNSAyVjExQzEuNSAxMS4yNzYxIDEuNzIzODYgMTEuNSAyIDExLjVINi41IiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+PC9nPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSBrZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFyIj48cGF0aCBkPSJNMTEgNC41SDdDNi43MjM4NiA0LjUgNi41IDQuNzIzODYgNi41IDVWMTRDNi41IDE0LjI3NjEgNi43MjM4NiAxNC41IDcgMTQuNUgxNEMxNC4yNzYxIDE0LjUgMTQuNSAxNC4yNzYxIDE0LjUgMTRWOEwxMSA0LjVaIiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+PHBhdGggZD0iTTEwLjUgNC41VjhDMTAuNSA4LjI3NjE0IDEwLjcyMzkgOC41IDExIDguNUgxNC41IiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+PC9nPjwvc3ZnPg==)

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld2JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1wcmltYXJ5IGtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIiPjxwYXRoIGQ9Ik05LjUgMi41TDYuNSAxMy41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgLz48cGF0aCBkPSJNMTEuNSA0TDE0LjI3NSA3LjcwMDAxQzE0LjQwODMgNy44Nzc3OSAxNC40MDgzIDguMTIyMjQgMTQuMjc1IDguMzAwMDFMMTEuNSAxMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+PHBhdGggZD0iTTQuNSA0TDEuNzI1IDcuNzAwMDFDMS41OTE2NyA3Ljg3Nzc5IDEuNTkxNjcgOC4xMjIyNCAxLjcyNSA4LjMwMDAxTDQuNSAxMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+PC9nPjwvc3ZnPg==)

不同状态 #

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

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

成功 警告 普通 错误 加载 消息

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdib3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHN0eWxlPi5rZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFye3N0cm9rZS13aWR0aDp2YXIoLS1rZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFyLCAxcHgpOyB9LmtkLWNvbG9yLWljb24tcHJpbWFyeXtmaWxsOiMzMzMzMzM7IGZpbGw6dmFyKC0ta2QtY29sb3ItaWNvbi1wcmltYXJ5LCAjMzMzMzMzKTsgc3Ryb2tlOiMzMzMzMzM7IHN0cm9rZTp2YXIoLS1rZC1jb2xvci1pY29uLXByaW1hcnksICMzMzMzMzMpOyB9LmtkLWNvbG9yLWljb24tYmx1ZS1wcmltYXJ5e2ZpbGw6IzI2NjFCRjsgZmlsbDp2YXIoLS1rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSwgIzI2NjFCRik7IHN0cm9rZTojMjY2MUJGOyBzdHJva2U6dmFyKC0ta2QtY29sb3ItaWNvbi1ibHVlLXByaW1hcnksICMyNjYxQkYpOyB9PC9zdHlsZT48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1wcmltYXJ5IGtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIiPjxwYXRoIGQ9Ik05LjUgNC41VjJDOS41IDEuNzIzODYgOS4yNzYxNCAxLjUgOSAxLjVIMkMxLjcyMzg2IDEuNSAxLjUgMS43MjM4NiAxLjUgMlYxMUMxLjUgMTEuMjc2MSAxLjcyMzg2IDExLjUgMiAxMS41SDYuNSIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjwvZz48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1ibHVlLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTExIDQuNUg3QzYuNzIzODYgNC41IDYuNSA0LjcyMzg2IDYuNSA1VjE0QzYuNSAxNC4yNzYxIDYuNzIzODYgMTQuNSA3IDE0LjVIMTRDMTQuMjc2MSAxNC41IDE0LjUgMTQuMjc2MSAxNC41IDE0VjhMMTEgNC41WiIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjxwYXRoIGQ9Ik0xMC41IDQuNVY4QzEwLjUgOC4yNzYxNCAxMC43MjM5IDguNSAxMSA4LjVIMTQuNSIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjwvZz48L3N2Zz4=)

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld2JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48c3R5bGU+LmtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXJ7c3Ryb2tlLXdpZHRoOnZhcigtLWtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIsIDFweCk7IH0ua2QtY29sb3ItaWNvbi1wcmltYXJ5e2ZpbGw6IzMzMzMzMzsgZmlsbDp2YXIoLS1rZC1jb2xvci1pY29uLXByaW1hcnksICMzMzMzMzMpOyBzdHJva2U6IzMzMzMzMzsgc3Ryb2tlOnZhcigtLWtkLWNvbG9yLWljb24tcHJpbWFyeSwgIzMzMzMzMyk7IH08L3N0eWxlPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTkuNSAyLjVMNi41IDEzLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjxwYXRoIGQ9Ik0xMS41IDRMMTQuMjc1IDcuNzAwMDFDMTQuNDA4MyA3Ljg3Nzc5IDE0LjQwODMgOC4xMjIyNCAxNC4yNzUgOC4zMDAwMUwxMS41IDEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48cGF0aCBkPSJNNC41IDRMMS43MjUgNy43MDAwMUMxLjU5MTY3IDcuODc3NzkgMS41OTE2NyA4LjEyMjI0IDEuNzI1IDguMzAwMDFMNC41IDEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48L2c+PC9zdmc+)

可关闭 #

可以添加关闭按钮。

默认的 Message 是不可以被人工关闭的,如果需要可手动关闭的 Message,可以使用showClose字段。此外,和 Notification 一样,Message 拥有可控的duration,设置0为不会被自动关闭,默认为 3000 毫秒。

消息 成功 警告 错误 加载

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdib3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHN0eWxlPi5rZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFye3N0cm9rZS13aWR0aDp2YXIoLS1rZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFyLCAxcHgpOyB9LmtkLWNvbG9yLWljb24tcHJpbWFyeXtmaWxsOiMzMzMzMzM7IGZpbGw6dmFyKC0ta2QtY29sb3ItaWNvbi1wcmltYXJ5LCAjMzMzMzMzKTsgc3Ryb2tlOiMzMzMzMzM7IHN0cm9rZTp2YXIoLS1rZC1jb2xvci1pY29uLXByaW1hcnksICMzMzMzMzMpOyB9LmtkLWNvbG9yLWljb24tYmx1ZS1wcmltYXJ5e2ZpbGw6IzI2NjFCRjsgZmlsbDp2YXIoLS1rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSwgIzI2NjFCRik7IHN0cm9rZTojMjY2MUJGOyBzdHJva2U6dmFyKC0ta2QtY29sb3ItaWNvbi1ibHVlLXByaW1hcnksICMyNjYxQkYpOyB9PC9zdHlsZT48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1wcmltYXJ5IGtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIiPjxwYXRoIGQ9Ik05LjUgNC41VjJDOS41IDEuNzIzODYgOS4yNzYxNCAxLjUgOSAxLjVIMkMxLjcyMzg2IDEuNSAxLjUgMS43MjM4NiAxLjUgMlYxMUMxLjUgMTEuMjc2MSAxLjcyMzg2IDExLjUgMiAxMS41SDYuNSIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjwvZz48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1ibHVlLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTExIDQuNUg3QzYuNzIzODYgNC41IDYuNSA0LjcyMzg2IDYuNSA1VjE0QzYuNSAxNC4yNzYxIDYuNzIzODYgMTQuNSA3IDE0LjVIMTRDMTQuMjc2MSAxNC41IDE0LjUgMTQuMjc2MSAxNC41IDE0VjhMMTEgNC41WiIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjxwYXRoIGQ9Ik0xMC41IDQuNVY4QzEwLjUgOC4yNzYxNCAxMC43MjM5IDguNSAxMSA4LjVIMTQuNSIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjwvZz48L3N2Zz4=)

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld2JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48c3R5bGU+LmtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXJ7c3Ryb2tlLXdpZHRoOnZhcigtLWtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIsIDFweCk7IH0ua2QtY29sb3ItaWNvbi1wcmltYXJ5e2ZpbGw6IzMzMzMzMzsgZmlsbDp2YXIoLS1rZC1jb2xvci1pY29uLXByaW1hcnksICMzMzMzMzMpOyBzdHJva2U6IzMzMzMzMzsgc3Ryb2tlOnZhcigtLWtkLWNvbG9yLWljb24tcHJpbWFyeSwgIzMzMzMzMyk7IH08L3N0eWxlPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTkuNSAyLjVMNi41IDEzLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjxwYXRoIGQ9Ik0xMS41IDRMMTQuMjc1IDcuNzAwMDFDMTQuNDA4MyA3Ljg3Nzc5IDE0LjQwODMgOC4xMjIyNCAxNC4yNzUgOC4zMDAwMUwxMS41IDEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48cGF0aCBkPSJNNC41IDRMMS43MjUgNy43MDAwMUMxLjU5MTY3IDcuODc3NzkgMS41OTE2NyA4LjEyMjI0IDEuNzI1IDguMzAwMDFMNC41IDEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48L2c+PC9zdmc+)