简介
vue-msgs 是一个基于 Vue 的弹窗组件，可以像 message、alert、confirm 一样弹出不同类型的信息框，并支持自定义确认、取消按钮文本以及回调函数。使用 vue-msgs 可以方便快捷地实现常见的用户交互提示，提高用户体验。
安装
npm install vue-msgs --save
使用方法
引入并注册组件
在 Vue 项目中的入口文件 main.js 中添加代码：
import Vue from 'vue' import VueMsgs from 'vue-msgs' Vue.use(VueMsgs)
调用组件
this.$msgs.success('成功提示', '提示内容', {
confirmText: '好的',
cancelText: '',
onConfirm() {
console.log('用户点击了确认按钮')
},
onCancel() {}
})其中，success 是用于弹出成功提示的方法，'成功提示' 是弹窗标题，'提示内容' 是弹窗内容，{} 中是可选参数对象。confirmText 是确认按钮文本，默认为 '确认'，cancelText 是取消按钮文本，默认为空，onConfirm 和 onCancel 是确认和取消按钮的回调函数，可以自定义实现相应的业务逻辑。
除了 success 方法，还有 info、warning、error 方法。它们的使用方法和 success 方法相同，只是弹窗的样式和图标不同。
示例代码
以下是一个完整的使用示例：
-- -------------------- ---- -------
----------
-----
------- ------------------------- ----------------
------
-----------
--------
------ ------- -
-------- -
------------- -
-------------------------- ------- -
------------ -----
----------- ---
----------- -
------------------------
--
---------- --
--
-
-
-
---------总结
通过使用 vue-msgs，我们可以快速方便地实现用户交互提示功能，使得用户在操作页面时有更好的体验。同时，vue-msgs 的组件化设计也为我们的代码编写和维护带来了很多便利。希望本文能够帮助大家更好地使用和理解 vue-msgs，同时也为大家在实现类似功能时提供了一些参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672683660cf7123b36660