使用Vue.js构建可复用的弹框组件

尽管我很想避免它们，但是每个项目总是会有那么的一个弹框组件。不要误解我的意思，这并不是说我没有发现它们有用，但是创建一个可用于多个设备的可访问组件会非常棘手的！

在本文中，您将学习如何使用transitions和slots创建可重用的弹框组件。

定义模板结构

我们先来定义我们的模板。我们需要一个背景阴影的div，一个div来充当弹框和一些元素来定义它的结构：

slots的使用使我们能够轻松地重复使用与不同类型的主体内容相同的模式。我们可以使用弹框来显示一个简单的文本，但我们可能想重复使用与表单相同的弹框来提交请求。尽管props通常足以构建组件，但通过props提供HTML会要求我们使用v-html来渲染它 - 这可能导致XSS攻击

在这里，我们使用slots的命名来允许我们在同一个组件中使用多个slot。当我们定义一个指定的slot时，我们用这个名称标识的任何内容都会被渲染，而不是原来的slot - 让我们把它看作一个占位符。

就像一个占位符，一个slot也可以有一个默认的内容，如果我们不提供任何内容，它都会被渲染。由于提供的内容替换了

让我们设置slot，包装器元素和初始CSS的一些默认值，使它看起来像一个基本的弹框。

而且我们已经制作了一个非常简单的弹框盒子！



添加Transitions

注意弹框是如何突然打开的？ 我们可以通过使用Transitions使它变得顺滑一些。Vue提供了一个名为transition的包装组件，允许我们添加进入和离开的transitions。 这个包装器组件可以用于任何元素或组件，它们允许CSS和JavaScript钩子。

每次插入或移除一个由transition包装的组件或元素时，Vue都会检查给定的元素是否有CSS转换，并在适当的时候添加或移除它们。 对于JavaScript钩子也是如此，但在这种情况下，我们将只使用CSS。

当一个元素被添加或删除时，六个class将应用用于进入/离开的transitions。 他们每个人都会以transition的名字作为前缀。 在本指南中，您将找到有关转换如何工作的详细说明。

首先让我们开始添加一个transition包装组件到我们的弹框：

现在让我们添加一个不透明度的transition，使应用的类缓慢地淡入淡出：

现在我们的模式打开和关闭顺利！



使弹框变得可访问

唯一缺少的是把这个弹框转换成一个可访问的弹框。我们可以通过使用aria属性来实现这一点。role="dialog"有助于辅助软件识别我们的组件是一个应用程序对话框，与用户界面的其余部分分离。 虽然添加对话框的role是有帮助的，但不足以使其可访问，我们需要对它进行适当的标记。 我们可以通过aria-labelledby和aria来描述属性。请不要忘记标记我们的关闭按钮！

现在我们的模态组件的最终版本应该如下所示：

现在我们可以通过在我们的应用程序中使用我们的模式组件。

一个可重复利用的弹框组件就完成了。