在前端开发中，我们经常会需要使用到一些通用的组件库或者模板。而在这些组件库或模板中，也常常有一些常用的组件或模板需要被重用，大量减少了前端开发的工作量。而 npm 包 oc-templates-messages 就是其中之一。本文将会介绍如何使用 oc-templates-messages 这个 npm 包。
oc-templates-messages 是什么
oc-templates-messages 是一个基于 React 的 UI 组件库，提供了一些常见的消息提示组件，例如：通知、警告、错误、成功等。 这个组件库的实现方式是通过组合多个基础组件来达到构建的目的，因此该组件库的代码量相对较小，使用起来也非常方便。
安装 oc-templates-messages
使用 oc-templates-messages，你需要在项目中安装该组件库。由于 oc-templates-messages 是 npm 包，因此，我们可以通过 npm 命令来安装该 npm 包：
npm install oc-templates-messages
此时，我们就可以通过引入 oc-templates-messages 模块来使用该组件库的组件。
使用 oc-templates-messages
在安装完 oc-templates-messages 后，你需要在你的项目中引入该模块。在 Vue 项目中，你可以这样引入：
import Message from 'oc-templates-messages';
如果你使用的是 React 项目，引入方式如下：
import { Message, notice, warning, error, success } from 'oc-templates-messages';示例代码
消息通知（notice）：
Message.notice('Hello World!');警告（warning）：
Message.warning('存在修改尚未保存，是否确定离开当前页面？', {
duration: 0,
onClose: () => {
console.log('警告消息关闭了！');
},
});错误（error）：
Message.error('操作失败！', {
duration: 500000,
onClick: () => {
console.log('你点击了错误消息！');
},
});成功（success）：
Message.success('操作成功！', {
duration: 3000,
});Message 组件
Message 是一个消息提示的核心组件。它由多个基础组件组合而成，通过 Message 完成对预置的通知组件（notice）、警告组件（warning）、错误组件（error）和成功组件（success）的调用和渲染。
Message 的 props
closable是否显示关闭按钮。description描述性文字，支持 ReactNode。duration消息保留时间，单位秒，设置为 0 表示不自动关闭，默认 2 秒后自动关闭。icon自定义图标，支持 ReactNode。key当前提示的 key，用于自动关闭等操作。message必选属性，提供一个短提示内容，支持 ReactNode。onClose关闭时触发的回调函数。onClick点击组件时触发的回调函数。style自定义样式。
小结
通过上述步骤，我们学习了如何在 Vue 或 React 项目中使用 npm 包 oc-templates-messages。它提供了一些通用的消息提示组件，可以极大的减少我们编写这些组件的时间。同时，我们还学习了 Message 组件的使用，它是各类提示组件的核心，可以通过传入不同的 props 来渲染出不同的提示信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbef4b5cbfe1ea0611bb5