在 Web 前端开发中，我们经常需要在页面上弹出多个提示信息，如错误提示、成功提示、警告提示等等。而 vue-multiple-message 就是一款方便快捷地实现此类需求的 npm 包。
安装
你可以通过 npm 进行安装，命令如下：
npm install vue-multiple-message --save
使用
在你的 Vue 项目中，引入 vue-multiple-message：
import vueMultipleMessage from 'vue-multiple-message' Vue.use(vueMultipleMessage)
这样 vue-multiple-message 就已经成功引入了！
API
vue-multiple-message 提供了一些方法，以下是它们的介绍：
$message
$message 方法用于在页面上展示提示信息，包括错误提示、成功提示、警告提示等。
this.$message({ type: 'error', // 其中 type 参数可以是 'info'、'success'、'warning'、'error' 中的任意一个 content: '网络错误，请重试！', // content 参数是提示信息的具体内容 duration: 3000 // duration 参数是提示信息的显示时间（单位：毫秒） })
此外，你可以通过修改 vueMultipleMessage.options 来全局配置 message 的默认参数：
// 例如以下配置会使得提示信息为圆角框样式，显示时间为 5 秒 vueMultipleMessage.options = { type: 'info', duration: 5000 }
$message.closeAll
$message.closeAll 方法用于关闭所有正在展示的提示信息。
this.$message.closeAll()
$message.setStyle
$message.setStyle 方法用于手动修改某一提示信息的样式。
const message = this.$message({ content: 'Hello world!' }) message.setStyle({ background: 'red', color: 'white' })
示例代码
下面是一个基于 vue-multiple-message 的示例代码，它能够在页面上自动弹出一个计时器，倒计时结束后弹出一条提示信息：
-- -------------------- ---- ------- ---------- ----- ------------- ---------- ----- --------- ------ ------ ----------- -------- ------ ------- - ------ - ------ - ---------- -- - -- --------- - ----- ----- - -------------- -- - -- --------------- - -- - ---------------- - ---- - -------------------- --------------- ----- ---------- -------- ----- ---- -- - -- ----- - - ---------展开代码
通过这个例子，你可以更好地理解 vue-multiple-message 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b381e8991b448dff27
