在前端开发中，消息提示是一项很重要的功能。而 hjs-message是一款可以帮助我们实现消息提示的便捷工具。在本篇文章中，我们将为大家介绍 hjs-message 的安装与使用方法，并通过示例代码以及深入学习的方式，帮助大家掌握该工具的使用技巧。
hjs-message 的安装
- 安装方式1
npm i hjs-message
- 安装方式2
yarn add hjs-message
hjs-message 的基本用法
在使用 hjs-message 之前，我们需要先在 JS 文件中引入该工具。
import Message from "hjs-message";
完成引入之后，我们就可以开始使用该工具提供的方法。
-- -------------------- ---- ------- -- ------------ ------------------------ -- ------------ ---------------------- -- ------------ ------------------------ -- ------------ ------------------------- -- ------------ ------------------------------- -- ---- ------- ---------------- --------- ---- ---
hjs-message 的进阶用法
修改默认提示文案
除了使用默认的提示消息之外，我们也可以对 hjs-message 的默认提示文案进行修改。
Message.config({
successMessage: "操作成功",
errorMessage: "操作失败",
warningMessage: "警告提示",
infoMessage: "这是一条信息提示",
loadingMessage: "正在加载，请稍后..."
});自定义消息提示类型
我们可以使用 extend 方法，来自定义消息提示类型。
-- -------------------- ---- -------
----------------
-------- -
---------------
-------- -----------
----- --------
---
-
---
----------------- -- -------------全局调用
我们可以使用 vue 的原型链，在全局进行 hjs-message 工具的调用。
import Message from "hjs-message"; Vue.prototype.$message = Message;
在全局中就可以调用 $message 函数，而不必在每个需要使用的组件中重新引入 hjs-message 工具。
hjs-message 的示例代码
下面是一个完整的 hjs-message 示例代码：
-- -------------------- ---- -------
------ --- ---- ------
------ --- ---- ------------
------ ------- ---- --------------
------------------------ - ------
-- ---- ----------- --
---------------------- - --------
-- ---------
----------------
-------- -
---------------
-------- -----------
----- --------
---
-
---
-- -- ----------- ------
----------------
--------- -----
--------------- -------
------------- -------
--------------- -------
------------ -----------
--------------- -------------
---
--- -----
------- --- -- ------
------------------总结
hjs-message 是一款非常实用的消息提示工具，它可以帮助我们实现各种样式、内容、类型的消息提示。通过本教程的详细讲解，相信大家已经能够熟练掌握该工具的使用方法，并且可以根据自己的需求进行自定义类型的创建。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664781e8991b448e25c2