在前端开发中，消息提示是非常常见的功能之一。vue-element-multiple-message 是一个基于 Vue 框架和 Element UI 组件库的消息提示组件，可以实现多个消息提示同时展示的效果，极大地提高了用户体验。本文将详细介绍该组件的使用方法及其示例代码，帮助读者快速掌握此技术并实际运用到项目中。
安装和引入
首先，我们需要在项目中安装 vue-element-multiple-message，使用以下命令：
npm install vue-element-multiple-message --save
然后，在需要使用该组件的 Vue 组件中，引入组件并注册为局部组件：
import Vue from 'vue'
import MultipleMessage from 'vue-element-multiple-message'
Vue.component('multiple-message', MultipleMessage)接下来，我们就可以在模板中使用组件了：
<template>
<div>
<multiple-message></multiple-message>
</div>
</template>API 参数说明
vue-element-multiple-message 组件提供了以下几个 API，用于控制消息提示的展示和隐藏：
方法
this.$message(config: Object)
展示一条消息提示。config 参数是一个对象，其中包含以下属性：
- type：消息类型，可选值为 success、warning、info、error，默认值为 info。
- message：消息文本。
- duration：消息展示时间（毫秒），默认值为 3000。
- closable：是否可关闭，默认值为 false。
- showClose：是否显示关闭按钮，默认值为 false。
- center：是否居中显示，默认值为 false。
- offset：消息提示的偏移量，格式为 {x: number, y: number}，默认值为 {x: 0, y: 20}。
- id：消息的唯一标识符，用于在 showMessage 和 hideMessage 时识别该条消息。
示例代码：
-- -------------------- ---- ------- --------------- ----- ---------- -------- ------- --------- ----- --------- ----- ---------- ----- ------- ----- ------- ----- ----- --- ----------- --
this.$message.success(message: string)
展示一条成功提示。
示例代码：
this.$message.success('操作成功')this.$message.warning(message: string)
展示一条警告提示。
示例代码：
this.$message.warning('操作失败')this.$message.info(message: string)
展示一条信息提示。
示例代码：
this.$message.info('请先登录')this.$message.error(message: string)
展示一条错误提示。
示例代码：
this.$message.error('系统异常')属性
visible
是否显示消息提示组件。
示例代码：
-- -------------------- ---- -------
----------
-----
------- --------------- - ------------------------
----------------- --------------------------------------
------
-----------
--------
------ ------- -
---- -- -
------ -
-------- -----
-
-
-
---------组件示例
下面是一个具有较完整功能的 vue-element-multiple-message 示例：
-- -------------------- ---- -------
----------
-----
------- -----------------------------------
----------------- ------------------
---------------------------
-------------------------
--------------------------
-------------------
------
-----------
--------
------ ------- -
---- -- -
------ -
-------- -----
-
--
-------- -
---------- -- -
----- --- - ------------------------ - -----
---------------
----- ----------
-------- --- --------
--------- -----
--------- -----
---------- -----
------- ------
------- ----- ------
--- ----------------
--
--
------------------ --------- -
---------------------------- -----
--
----------------- --------- -
---------------------------- -----
--
----------------- --------- -
---------------------------- -----
-
-
-
---------以上示例会在页面中创建一个「添加一条消息」的按钮和一个 vue-element-multiple-message 组件，点击按钮即可添加一条随机的 success 类型的消息。同时，console 会输出每个消息的「关闭/显示/隐藏」事件。读者可以根据需要自行调整组件的属性和事件监听。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601581e8991b448de2a9