Vue.js 是一款流行的 JavaScript 框架，它提供了许多实用的功能，其中包括弹框和模态框。本文将介绍如何在 Vue.js 中实现弹框和模态框，并提供示例代码和指导意义。
弹框
在 Vue.js 中实现弹框可以使用 Vue.js 的组件功能。我们可以创建一个弹框组件，然后在需要弹框的地方使用该组件。以下是一个简单的弹框组件示例代码：
-- -------------------- ---- -------
----------
---- ------------
---- ----------------------
---- ---------------
---- ---------------- ----- --------
---- ------------------ ------- --------
------- ------------- -----------------------------
------
------
-----------
--------
------ ------- -
------ -
------ -
----- -------
--------- -----
--
-------- -
----- -------
--------- -----
--
----- -
----- --------
--------- -----
--
--
-------- -
------- -
--------------------
--
--
--
---------
------ -------
-------- -
--------- ------
---- --
----- --
------ --
------- --
----------------- ------- -- -- -----
-------- --
-
------- -
--------- ------
---- ----
----- ----
---------- --------------- ------
----------------- -----
-------------- ----
----------- - --- --- ------- -- -- -----
-------- -----
-------- --
-
------ -
---------- -----
------------ -----
-------------- ----
-
-------- -
---------- -----
------------ ----
-------------- -----
-
------ -
----------------- --------
------ -----
------- -----
-------------- ----
-------- --- -----
------- --------
-
--------在上面的代码中，我们创建了一个 Dialog 组件，它接受三个 props：title、content 和 show。title 和 content 分别表示弹框的标题和内容，show 表示弹框是否显示。
在模板中，我们使用 v-if 指令来控制弹框的显示和隐藏。当 show 为 true 时，弹框会显示出来，否则不显示。
弹框的样式使用了 CSS，其中 .overlay 表示背景遮罩层，.dialog 表示弹框本身，.title 表示标题，.content 表示内容，.close 表示关闭按钮。
在组件的方法中，我们定义了一个 close 方法，当点击关闭按钮时，会触发该方法并通过 $emit 方法向父组件发送 close 事件。
使用该组件的示例代码如下：
-- -------------------- ---- -------
----------
-----
------- ------------------ - ---------- ---------------
------- --------------- ------- ----------------- --------- ------------------ ------------------ - ----------------
------
-----------
--------
------ ------ ---- --------------------------
------ ------- -
----------- -
-------
--
------ -
------ -
----------- ------
--
--
--
---------在上面的代码中，我们引入了 Dialog 组件，并在模板中使用该组件。当点击按钮时，会将 showDialog 设置为 true，弹框就会显示出来。当点击关闭按钮时，会触发 close 事件并将 showDialog 设置为 false，弹框就会隐藏起来。
模态框
与弹框类似，模态框也可以使用 Vue.js 的组件功能来实现。以下是一个简单的模态框组件示例代码：
-- -------------------- ---- -------
----------
---- ------------
---- ----------------------
---- --------------
---- ---------------
---- ---------------- ----- --------
------- ------------- -------------------------------
------
---- -------------
-------------
------
---- ---------------
------- --------------- ---------------------------------
------- -------------- -------------------------------
------
------
------
-----------
--------
------ ------- -
------ -
------ -
----- -------
--------- -----
--
----- -
----- --------
--------- -----
--
--
-------- -
------- -
--------------------
--
--------- -
----------------------
--
-------- -
---------------------
--
--
--
---------
------ -------
-------- -
--------- ------
---- --
----- --
------ --
------- --
----------------- ------- -- -- -----
-------- --
-
------ -
--------- ------
---- ----
----- ----
---------- --------------- ------
----------------- -----
-------------- ----
----------- - --- --- ------- -- -- -----
-------- -----
------ ------
-------- --
-
------- -
-------- -----
---------------- --------------
------------ -------
-------------- -----
-
------ -
---------- -----
------------ -----
-
------ -
----------------- ------------
------- -----
---------- -----
------------ -----
------ -----
------- --------
-
----- -
-------------- -----
-
------- -
-------- -----
---------------- ---------
-
-------- -
----------------- --------
------ -----
------- -----
-------------- ----
-------- --- -----
------------- ----
------- --------
-
------- -
----------------- -----
------ --------
------- --- ----- --------
-------------- ----
-------- --- -----
------- --------
-
--------在上面的代码中，我们创建了一个 Modal 组件，它接受两个 props：title 和 show。title 表示模态框的标题，show 表示模态框是否显示。
在模板中，我们使用 v-if 指令来控制模态框的显示和隐藏。当 show 为 true 时，模态框会显示出来，否则不显示。
模态框的样式使用了 CSS，其中 .overlay 表示背景遮罩层，.modal 表示模态框本身，.header 表示模态框的头部，.title 表示标题，.close 表示关闭按钮，.body 表示模态框的主体内容，.footer 表示模态框的底部，.confirm 表示确认按钮，.cancel 表示取消按钮。
在组件的方法中，我们定义了三个方法：close、confirm 和 cancel。当点击关闭按钮时，会触发 close 方法并通过 $emit 方法向父组件发送 close 事件；当点击确认按钮时，会触发 confirm 方法并通过 $emit 方法向父组件发送 confirm 事件；当点击取消按钮时，会触发 cancel 方法并通过 $emit 方法向父组件发送 cancel 事件。
使用该组件的示例代码如下：
-- -------------------- ---- -------
----------
-----
------- ----------------- - ---------- --------------
------ -------------- ------- ----------------- ----------------- - ------ ------------------------ -----------------------
-------- -----------
--------
------
-----------
--------
------ ----- ---- -------------------------
------ ------- -
----------- -
------
--
------ -
------ -
---------- ------
--
--
-------- -
--------------- -
-------------------------
-------------- - ------
--
-------------- -
-------------------------
-------------- - ------
--
--
--
---------在上面的代码中，我们引入了 Modal 组件，并在模板中使用该组件。当点击按钮时，会将 showModal 设置为 true，模态框就会显示出来。当点击确认按钮时，会触发 confirm 事件并执行 handleConfirm 方法；当点击取消按钮时，会触发 cancel 事件并执行 handleCancel 方法。在 handleConfirm 方法和 handleCancel 方法中，我们可以执行相应的操作并将 showModal 设置为 false，模态框就会隐藏起来。
指导意义
通过以上示例代码，我们可以看出，在 Vue.js 中实现弹框和模态框是非常简单的。我们只需要创建一个组件，然后在需要使用的地方引入并使用该组件即可。
在使用组件时，我们可以通过传递 props 来控制组件的显示和隐藏，并通过 $emit 方法向父组件发送事件，从而实现组件之间的通信。
在开发实际项目时，我们可以根据具体需求来自定义弹框和模态框的样式和功能，并将其封装成组件供其他组件使用，从而提高代码的复用性和可维护性。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d0a947e46428fe9eded2f5