vue-confirm 是一个基于 Vue.js 的常用确认对话框组件，可以轻松地在 Vue.js 前端项目中使用。本文将介绍如何使用 npm 包 vue-confirm，并提供示例代码以帮助读者更好地了解这个组件。
1. 安装 vue-confirm
通过 npm 安装 vue-confirm，在本地项目根目录下输入以下命令：
npm install vue-confirm --save
该命令会自动将 vue-confirm 包添加到项目中。
2. 引入 vue-confirm
在需要使用 vue-confirm 的组件中，首先需要引入该组件。可以通过以下代码来实现：
import VueConfirm from 'vue-confirm'; Vue.use(VueConfirm);
其中，Vue.use() 方法是 Vue.js 的全局 API，用于安装 Vue 插件。此处我们使用该方法来安装 vue-confirm。
3. 使用 vue-confirm
在组件中，你可以使用 $confirm 对象来调用 vue-confirm，并将需要显示的内容作为参数传递给 $confirm。以下是使用 $confirm 呼出对话框的示例：
this.$confirm('确定删除此项吗？')
.then(() => {
// 用户点击“确定”后执行的代码
})
.catch(() => {
// 用户点击“取消”后执行的代码
});在上面的示例中，this.$confirm('确定删除此项吗？') 将会弹出一个带有“确认”和“取消”两个按钮的提示框。如果用户点击了“确认”按钮，则 .then() 中的代码将会得到执行；如果用户点击了“取消”按钮，则 .catch() 中的代码将会执行。
如果你需要自定义“确认”和“取消”按钮的文本内容，可以通过以下方式来实现：
this.$confirm('确定删除此项吗？', {
confirmButtonText: '自定义确认按钮文本',
cancelButtonText: '自定义取消按钮文本',
})这里我们添加了一个名为 options 的参数，并指定了 confirmButtonText 和 cancelButtonText 的值。这样，在呼出确认对话框时，就会显示自定义文本内容的确认、取消按钮。
4. 完整代码示例
-- -------------------- ---- -------
----------
-----
------- ----------------------------------
------
-----------
--------
------ ------- -
-------- -
--------------- -
------------------------- -
------------------ -----
----------------- -----
--
-------- -- -
-- --------------
-----------------------
--
--------- -- -
-- --------------
-----------------------
---
--
--
--
---------5. 总结
本文详细介绍了如何使用 npm 包 vue-confirm，并提供了示例代码。 vue-confirm 可以帮助我们轻松地在 Vue.js 项目中使用常用的确认对话框组件，从而提高了前端开发的效率。希望本文对读者有所帮助，谢谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cb781e8991b448e6239