如何使用 Vue.js 创建图像滑块

正如你所知道的,Vue.js是最流行的进步JavaScript框架之一,与其他框架相比具有许多优点,本教程将帮助您从头开始创建Vue图像滑动器组件,而无需使用额外的第三方库。

项目设置

如果您尚未这样做,在创建一个新的 Vue.js 项目之前,您应该通过以下操作在您的计算机上安装 Vue CLI:

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

使用 Vue CLI 创建新项目:

1$ vue create vue-image-slider
2$ cd vue-image-slider

然后运行服务脚本来启动本地服务器:

1$ npm run serve

我們的 Vue.js 項目現在正在成功運行。

创建 Slider 组件

您可能会注意到自动生成的HelloWorld组件。您可以将该组件重新命名为Slider,并对其进行更改,或者删除它并创建一个新的Slider组件。

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

 1<template>
 2  <h1>Heading</h1>
 3</template>
 4<script>
 5export default {
 6  name: "Slider",
 7  data() {
 8    return {
 9      images: [
10        "https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg",
11        "https://cdn.pixabay.com/photo/2016/02/17/23/03/usa-1206240_1280.jpg",
12        "https://cdn.pixabay.com/photo/2015/05/15/14/27/eiffel-tower-768501_1280.jpg",
13        "https://cdn.pixabay.com/photo/2016/12/04/19/30/berlin-cathedral-1882397_1280.jpg"
14      ],
15      timer: null,
16      currentIndex: 0
17    };
18  },
19
20  mounted: function() {
21    this.startSlide();
22  },
23
24  methods: {
25    startSlide: function() {
26      this.timer = setInterval(this.next, 4000);
27    },
28
29    next: function() {
30      this.currentIndex += 1;
31    },
32    prev: function() {
33      this.currentIndex -= 1;
34    }
35  },
36
37  computed: {
38    currentImg: function() {
39      return this.images[Math.abs(this.currentIndex) % this.images.length];
40    }
41  }
42};
43</script>

让我们来看看我们在这里做了什么:

我们从 Pixabay获取了一系列图像URL)。
将计时器设置为null,并将currentIndex设置为0以显示第一张图像
创建了startSlide函数,以便每 4 秒将图像滑动
创建了next和prev函数来滑动到上一个或下一个图像。

是时候为组件添加标记/HTML部分了:

 1<template>
 2  <div>
 3    <transition-group name="fade" tag="div">
 4      <div v-for="i in [currentIndex]" :key="i">
 5        <img :src="currentImg" />
 6      </div>
 7    </transition-group>
 8    <a class="prev" @click="prev" href="#">&#10094; Previous</a>
 9    <a class="next" @click="next" href="#">&#10095; Next</a>
10  </div>
11</template>

在这里,我们利用附带Vue.js的内置transtion-group组件,然后重复图像并添加我们之前创建的函数。

为了使这个组件看起来很棒,我们需要添加一些CSS风格:

 1.fade-enter-active,
 2.fade-leave-active {
 3  transition: all 0.9s ease;
 4  overflow: hidden;
 5  visibility: visible;
 6  position: absolute;
 7  width:100%;
 8  opacity: 1;
 9}
10
11.fade-enter,
12.fade-leave-to {
13  visibility: hidden;
14  width:100%;
15  opacity: 0;
16}
17
18img {
19  height:600px;
20  width:100%
21}
22
23.prev, .next {
24  cursor: pointer;
25  position: absolute;
26  top: 40%;
27  width: auto;
28  padding: 16px;
29  color: white;
30  font-weight: bold;
31  font-size: 18px;
32  transition: 0.7s ease;
33  border-radius: 0 4px 4px 0;
34  text-decoration: none;
35  user-select: none;
36}
37
38.next {
39  right: 0;
40}
41
42.prev {
43  left: 0;
44}
45
46.prev:hover, .next:hover {
47  background-color: rgba(0,0,0,0.9);
48}

正如前面提到的,我们使用了Vue.js的内置过渡组组件,其中包括一些已准备好的类名称,例如fade-enter-active,fade-leave-active。

在 App.vue 中进行更改

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

 1<template>
 2  <div id="app">
 3    <Slider />
 4  </div>
 5</template>
 6
 7<script>
 8import Slider from "./components/Slider.vue";
 9export default {
10  name: "app",
11  components: {
12    Slider
13  }
14};
15</script>
16
17<style>
18#app {
19  font-family: "Avenir", Helvetica, Arial, sans-serif;
20  -webkit-font-smoothing: antialiased;
21  -moz-osx-font-smoothing: grayscale;
22  text-align: center;
23  color: #2c3e50;
24}
25body {
26  margin: 0px;
27}
28</style>