拖动滑块图像验证码vue

As you know, Vue.js is one of the most popular progressive JavaScript frameworks and has many benefits compared with other frameworks. This tutorial will help you in creating a Vue image slider component from scratch without using additional 3rd party libraries.

如您所知，Vue.js是最流行的渐进式JavaScript框架之一，与其他框架相比，具有许多优势。 本教程将帮助您从头开始创建Vue图像滑块组件，而无需使用其他第三方库。

项目设置 (Project Setup)

If you haven’t done so already, before creating a new Vue.js project you should install the Vue CLI globally on your machine by doing the following:

如果尚未执行此操作，则在创建新的Vue.js项目之前，应通过执行以下操作在计算机上全局安装Vue CLI：

$ npm install -g @vue/cli# OR$ yarn global add @vue/cli

Create a new project with the Vue CLI:

使用Vue CLI创建一个新项目：

$ vue create vue-image-slider$ cd vue-image-slider

Then run the serve script to start a local server:

然后运行serve脚本以启动本地服务器：

$ npm run serve

Our Vue.js project is now running successfully.

我们的Vue.js项目现已成功运行。

创建滑块组件 (Creating the Slider Component)

You may notice that there is a HelloWorld component generated automatically. You can either rename that component to Slider and make changes inside it or remove it and create a new Slider component. However, in both cases be sure to import the right component inside App.vue.

您可能会注意到有一个自动生成的HelloWorld组件。 您可以将该组件重命名为Slider并在其中进行更改，也可以删除它并创建一个新的Slider组件。 但是，在两种情况下，请确保在App.vue导入正确的组件。

Let’s create a new Slider component and add the following functionalities:

让我们创建一个新的Slider组件并添加以下功能：

Let’s look at what we did here:

让我们看看我们在这里做了什么：

• We got an array of image URLs from .

  我们从获得了一系列图像URL。

• Set timer to null and set currentIndex to 0 for showing the first image.

  将timer设置为null并将currentIndex设置为0以显示第一张图像。

• Created startSlide function for sliding images every 4 seconds.

  创建了startSlide函数，用于每4秒滑动一次图像。

• Created next and prev functions for sliding to the previous or the next image. According to the last currentImg function it detects which image must show at that time based on the index.

  创建next和prev功能滑动到上一个或下一个图像。 根据最后一个currentImg函数，它根据索引检测当时必须显示的图像。

It’s time to add the markup/HTML part to the component:

现在是时候将标记/ HTML部分添加到组件中了：

Here we take advantage of the built-in transtion-group component that comes with Vue.js, then iterate images and add the functions we created earlier.

在这里，我们利用Vue.js随附的内置转换transtion-group组件，然后迭代图像并添加我们之前创建的功能。

To make this component look great we need to add some CSS styling to it:

为了使该组件看起来很棒，我们需要为其添加一些CSS样式：

.fade-enter-active,.fade-leave-active {  transition: all 0.9s ease;  overflow: hidden;  visibility: visible;  position: absolute;  width:100%;  opacity: 1;}.fade-enter,.fade-leave-to {  visibility: hidden;  width:100%;  opacity: 0;}img {  height:600px;  width:100%}.prev, .next {  cursor: pointer;  position: absolute;  top: 40%;  width: auto;  padding: 16px;  color: white;  font-weight: bold;  font-size: 18px;  transition: 0.7s ease;  border-radius: 0 4px 4px 0;  text-decoration: none;  user-select: none;}.next {  right: 0;}.prev {  left: 0;}.prev:hover, .next:hover {  background-color: rgba(0,0,0,0.9);}

As it was mentioned earlier we used the built-in transition-group component from Vue.js which has ready-made class names like fade-enter-active, fade-leave-active, among others.

如前所述，我们使用了Vue.js内置的transition-group组件，该组件具有现成的类名，例如fade-enter-active ， fade-leave-active等。

在App.vue中进行更改 (Making changes in App.vue)

Let’s not forget to check App.vue and import our Slider component:

我们不要忘记检查App.vue并导入我们的Slider组件：

That’s it! Our image slider is ready to be used! You can find the full source code .

而已！ 我们的图像滑块已准备就绪，可以使用！ 您可以找到完整的源代码。

翻译自:

拖动滑块图像验证码vue