使用Tailwind和Vue创建带有进度指示器的轮播

A preview of the carousel component that we're going to build with Tailwind and Vue

Welcome to the third and final part of this series. In the previous articles, we covered creating a carousel with progress indicators using HTML and React. Now, it’s time to dive into Vue.

欢迎来到本系列的第三部分。在之前的文章中，我们使用HTML和React创建了一个带有进度指示器的轮播图。现在，是时候深入了解Vue了。

At the end of the tutorial, we will also see how to make our component reusable. That way, we can use it multiple times in the same project.

在本教程的最后，我们还将看到如何使我们的组件可重用。这样，我们可以在同一个项目中多次使用它。

Let’s get started!

让我们开始吧！

Create a file for the component

为组件创建一个文件

Let’s create a file named ProgressSlider.vue in the components folder of our app. In this file, we’ll define a Single-File Component (SFC) using the Composition API and TypeScript.

让我们在我们应用程序的components文件夹中创建一个名为ProgressSlider.vue的文件。在这个文件中，我们将使用组合式API和TypeScript定义一个单文件组件（SFC）。

<script setup lang="ts">
import SilderImg01 from '../assets/ps-image-01.png'
import SilderImg02 from '../assets/ps-image-02.png'
import SilderImg03 from '../assets/ps-image-03.png'
import SilderImg04 from '../assets/ps-image-04.png'
import SilderIcon01 from '../assets/ps-icon-01.svg'
import SilderIcon02 from '../assets/ps-icon-02.svg'
import SilderIcon03 from '../assets/ps-icon-03.svg'
import SilderIcon04 from '../assets/ps-icon-04.svg' const items = [ { img: SilderImg01, desc: 'Omnichannel', buttonIcon: SilderIcon01, }, { img: SilderImg02, desc: 'Multilingual', buttonIcon: SilderIcon02, }, { img: SilderImg03, desc: 'Interpolate', buttonIcon: SilderIcon03, }, { img: SilderImg04, desc: 'Enriched', buttonIcon: SilderIcon04, },
]
</script> <template> <div class="w-full max-w-5xl mx-auto text-center"> <!-- Item image --> <div class="transition-all duration-150 delay-300 ease-in-out"> <div class="relative flex flex-col"> <template :key="index" v-for="item in items"> <img class="rounded-xl" :src="item.img" width="1024" height="576" :alt="item.desc"> </template> </div> </div> <!-- Buttons --> <div class="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8"> <template :key="inde...