如何使用Tailwind CSS和Vue构建模态视频组件

Welcome to the third and final part of our series on How to Build a Video Modal Component! In this tutorial, we will create a fully-functional video modal component using Vue and Tailwind CSS, complete with TypeScript support.

欢迎来到我们关于如何构建视频模态框组件的第三和最后一部分！在本教程中，我们将使用Vue和Tailwind CSS创建一个完全功能的视频模态框组件，还支持TypeScript。

Please note that we won’t cover the step-by-step process of setting up a Vue app. However, we highly recommend using Vite as a build tool, as it makes creating a Vue app effortless with a simple command in the Terminal.

请注意，我们不会逐步介绍如何设置Vue应用程序的过程。但是，我们强烈推荐使用Vite作为构建工具，因为它可以通过终端中的简单命令轻松创建Vue应用程序。

After you’ve set up your app, the next step is to install Tailwind CSS and import the Tailwind directives into your CSS file. If you need inspiration, you can check out how we previously built this component in Talent, a recruitment website template, and Docs, a documentation website template.

在设置好您的应用程序之后，下一步是安装Tailwind CSS并将Tailwind指令导入到您的CSS文件中。如果您需要灵感，您可以查看我们之前在Talent（一个招聘网站模板）和Docs（一个文档网站模板）中如何构建此组件。

Let’s get started! We’ll be using a single-file component and naming it ModalVideo.vue.

让我们开始吧！我们将使用单文件组件，并将其命名为ModalVideo.vue。

<script setup lang="ts">
</script> <template> <div> <!-- 1. The button --> <!-- 2. The backdrop layer --> <!-- 3. The modal video --> </div>
</template>

Within the template tag, we will include the three essential elements required to create our component: the button, backdrop, and modal housing the video.

在 template 标签中，我们将包含创建组件所需的三个基本元素：按钮、背景和包含视频的模态框。

We need to establish the initial state of our modal – that can either be open or closed – and we’ll accomplish this by using a boolean ref that has a default value of false (i.e., closed). We’ll then assign this ref to the variable modalOpen:

我们需要建立模态框的初始状态 - 可以是打开或关闭的 - 我们将使用一个布尔类型的ref来实现这一点，它的默认值为false（即关闭）。然后，我们将把这个ref赋值给变量modalOpen：

<script setup lang="ts">
import { ref } from 'vue'
const modalOpen = ref<boolean>(false)
</script> <template> <div> <!-- 1. The button --> <!-- 2. The backdrop layer --> <!-- 3. The modal video --> </div...